WordPress Tricks

Show custom dropdown based on visited url in woocommerce category page

Suppose in some specific url ( mainly your product category page url) you want to show some specific or customize dropdown. Here I am sharing you such code which you can use by customizing it.

add_action( 'woocommerce_before_shop_loop', 'showcustomdropdown', 31 );
 
function showcustomdropdown() {      
   if ( is_product_category() ) {      
     // wc_product_dropdown_categories();
	$url = 'http://' . $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI'];


if ((strpos($url,'?product_cat=wall-mounted+single-zone') !== false) || strpos($url,'?product_cat=floor-mounted+single-zone') !== false || strpos($url,'?product_cat=ceilling-cassettes+single-zone') !== false || strpos($url,'?product_cat=concealed-duct+single-zone') !== false || strpos($url,'/mini-split-ac/single-zone/') !== false)  {
	echo "<select id='product_cat'>";
	echo '<option value=" ">'."Select Category"."</option>"; 
   echo '<option value="?product_cat=wall-mounted+single-zone">'. "Wall Mounted" .  '</option>';
	echo '<option value="?product_cat=floor-mounted+single-zone">'."Floor Mounted"  .  '</option>';
	echo '<option value="?product_cat=ceilling-cassettes+single-zone">'. "Ceilling Cassettes" .  '</option>';
	echo '<option value="?product_cat=concealed-duct+single-zone">'. "Concealed Duct" .  '</option>';
	echo "</select>";
} else {
    
}
	   
   } 
   wc_enqueue_js( "
      $('#product_cat').change(function () {
         location.href = '/shop/' + $(this).val();
      });
   " );
}
WordPress Tricks

Make Woocommerce single product page image round shape with border

woocommerce single product page image round shape with border

 

This is a simple css trick to make your woocommerce single product page to be round shape with a border. Use the code below in your  custom css portion.

If you face any issue feel free to take help in the comments section.

 


.woocommerce-product-gallery__image img {

border-bottom-left-radius: 50% 50% !important;
border-top-left-radius: 50% 50% !important;
border-top-right-radius: 50% 50%;
border-bottom-right-radius: 50% 50%;
border-bottom-left-radius: 50% 50% !important;
height:382px !IMPORTANT;
border: 5px solid #f5f5f5 !important;
}

.woocommerce-product-gallery__image {
width: 382px !IMPORTANT;

}

.woocommerce div.product div.images li img {
border: none !important;
transition: opacity .5s ease;
border-radius: none !important;
height: auto !important;
}