[Support request] Woocommerce product shortcodes styling

[jdaco]

Hello Tom,

I am trying to display a 3 column Woocommerce products using the WC product shortcodes in a page with no sidebars, but products are not showing full width inside the columns.

Help needed..

Thank you!
Jorge

[Leo]

Hi there,

You should be able to choose using GP’s customizer: https://docs.generatepress.com/article/woocommerce-overview/#shop

Let me know if this helps.

[jdaco]

Hello Leo, and thanks for your response, but the GP´s customizer does not help much.

I am using the Ultimate-Shortcode plugin to create 3 columns with boxes and 1 WC product Shortcode inside them, but the products appear too narrow, I want them to show 100% wide inside the boxes.

EXAMPLE:

[su_row]

[su_column size=”1/3″][su_box title=”” style=”soft” box_color=”#ffffff” radius=”4″ class=”box_home”]
[products ids=”360″][/su_box][/su_column]

[su_column size=”1/3″][su_box title=”” style=”soft” box_color=”#ffffff” radius=”4″ class=”box_home”]
[products ids=”362″][/su_box][/su_column]

[su_column size=”1/3″][su_box title=”” style=”soft” box_color=”#ffffff” radius=”4″ class=”box_home”]
[products ids=”366″][/su_box][/su_column]

[/su_row]

Thanks!

[Leo]

Any reason why you don’t want to use GP’s built in options?
It should make things easier.

I can take a look at the page if you can provide a link?
But this might be something you have to contact the plugin author if you want to go with that route.

[jdaco]

Hello Leo, please take a look at the site I am building:

http://cafeastrologico.com/
Pass: 3263

I did managed to center a background image in a section using this CSS that Tom recently suggested me:

.generate-sections-container {
background-position: center center;
position: relative;
}

What else should I add in order to center the 3 WooCommerce products at the section named “Tienda Online” and also some recent posts at the section named “Últimos artículos”

Thank you!

[Leo]

Can you try adding them like this?
<div class="center-content">shortcode here</div>

Then this CSS:

.center-content {
     text-align: center;
}

[Author]

Posts