Change the product category shortcode layout

It may be possible to fix this issue with some custom css. Please post a url to a relevant page so the markup can be examined in the browser inspector.

My site is in maintainance mode.

But this is the class-wc-shortocdes.php file default code I found:

*************************************************************
public function featured_category_products( $atts ) {

global $woocommerce_loop;

extract(shortcode_atts(array(
‘category’ => ”,
‘per_page’ => ‘4’,
‘columns’ => ‘4’,
‘orderby’ => ‘date’,
‘order’ => ‘desc’
), $atts));

****************************************************************

I could change it here but it would be better with CSS so I don’t loose the configuration when I update woocommerce next time.

Please help out with some CSS code to override the default columns from the shortcode from 4 to 3.

Regards,
Barry

I’ll try, but please turn off maintenance mode temporarily and post a url to a relevant page so the markup can be examined in the browser inspector. Markup varies by theme.

Ok, I will take it off maintainance for a while.

Check this url here to see the 4 column layout:

https://www.randallcoffee.com/tienda/suscripciones/

please advise once you have checked so I can put the maintainance mode back on.

Try this in your custom css:

#top div .products .product,
#top div .products .product.first,
#top div .products .product.last,
#top #main div .products .product.last
{clear:none; width:30%; margin:0 1.5% 0 1.5%}

It worked like a charm!

Thanks a lot.

Barry

This also helped me, thank you very much!

@lorro
I actually stumbled on this while looking for something else, but it works great, thanks! My only question is that it doesn’t work on the main page’s product layout and sometimes on the catalog’s layout of my site. It seems to be tied to how the address is displayed; it only works when the address specifies the page id instead of post type. Is there a workaround for this? Or is there a way to make sure every address shows up as page id?
Thanks again.

site for reference: https://www.gpii.com/test6723/

@gpii
CSS doesn’t depend on the page url. Different pages have different ids and classes in the markup, so css may vary. It looks like some of your pages are leaving room for a sidebar which you don’t have. Try this in your custom css:

#primary {width:100%}

Yep, that works. Awesome, thanks! I could’ve sworn I tried primary 100% before, but as long as it functions, I’m happy.