CODEWITHSUNDEEP
phpcsswordpresswoocommercestorefront
Dayley
Dayley

Reputation: 301

Change WooCommerce product column CSS for Shop page only

I am using the latest Wordpress with the Storefront Theme & Child Theme.

I am wanting to change the height: and padding: of the columns for WooCommerce's products (actually categories but they use the same columns). On the shop page only the categories are displayed which do not require to be as tall as product columns (no price, no sale tag, no buy now or add to cart button etc are on categories)

I am using this small piece of PHP in my Child Theme Functions to try and implement this but it doesn't seem to change anything, nor are any errors given:

function dayles_custom_shop_columns()
{
    if (function_exists('is_shop') && is_shop()) {
        echo "<style type='text/css'>.storefront-full-width-content .site-main ul.products.columns-4 li.product, ul.products li.product {height:320px!important;padding:20px!important;min-height:320px!important;max-height:320px!important;}</style>";
    } else {
       //Do nothing.
    }
}

I have also tried this using !important to see if it had any difference. But nope.

Any help is appreciated!

Upvotes: 1

Views: 2329

Answers (2)

dineshkashera
dineshkashera

Reputation: 1502

To make the product loop on shop page of same height, please wrap all the loop items in your custom div and then write your style.

Paste the below code in current active theme functions.php file

function start_before_shop_loop_item() {
   echo '<div class="custom_shop_loop_wrap">';
}
function end_after_shop_loop_item() {
  echo '</div>';
}
add_action( 'woocommerce_before_shop_loop_item', 'start_before_shop_loop_item', 10 );
add_action( 'woocommerce_after_shop_loop_item', 'end_after_shop_loop_item', 10 );

Then using the class custom_shop_loop_wrap add your styling.

function custom_css_add_wrap(){?>
<style>
    .custom_shop_loop_wrap{
      height:height:320px;
      max-height:320px;
}
</style>
   <?php }
add_action('wp_head', 'custom_css_add_wrap' );

Upvotes: 0

Ivnhal
Ivnhal

Reputation: 1095

You need to add a wp_head action hook in your functions:

Example:

function my_custom_css() {
     if (function_exists('is_shop') && is_shop()) {
        echo "<style type='text/css'>.storefront-full-width-content .site-main ul.products.columns-4 li.product, ul.products li.product {height:320px!important;padding:20px!important;min-height:320px!important;max-height:320px!important;}</style>";
    }
}
add_action('wp_head', 'my_custom_css' );

More information on wp_head action here.

Upvotes: 3

Related Questions