WooCommerce Product Column

[fabianno0572]

Hello,

I would like to display 5 products on woocommerce. Out of 5 products, i would like to make it 2 rows. First row, 2 products. Second row, 3 products.

The problem now is the alignment is weird when it is displaying. How to fix it?

Please refer to the image.

Attachments:

You must be logged in to view attached files.

[Laura]

Hello, can you explain a bit more the look you want it to have? 🙂 I will be happy to help you

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[fabianno0572]

I had explained clearly with the image. I would attach 2 images this time for clarity.

Attachments:

You must be logged in to view attached files.

[Laura]

Hello, i understand 🙂 You could use at the first row, 2 columns and 1 products each column and then at the second row, 4 columns and one each or 1 column with 4 products
Let me now if you prefer me to do it for you, i am happy to help, would just need admin credentials 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[fabianno0572]

This reply has been set as private.

[Laura]

Hello, i created a sample page where you can get the codes and add it to any page 🙂
Please note that i added the css to the quick css of visual composer ( check the gear icon )
the css is this one

COPY CODE

.box1 .product-loop-inner {
    width: 550px;
}
.box2 img.attachment-shop_catalog.size-shop_catalog.wp-post-image {
    height: 300px !important;
}

The first row has the class “box1” and the second row has “box2”

Let me know if you need help 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[fabianno0572]

Hello,
I don’t understand what are you saying.
1. You had created a page? I can’t see any new page created by you in my wordpress.
2. I had copied and pasted the CSS code into the visual composer Gear. But the images are still the same.

I really need help. I am not a web developer. Can you please use layman term so that I can really understand and solve it?

[Laura]

Hello, sorry, the page name is Columns tests, here is the content of the page, if you want to add this to any back, use the CLASSIC MODE of visual composer, paste the code and switch back to BACKEND MODE, also paste the css at the GEAR of visual composer, this way you should have everything setup as the Columns test page

Code for the classic mode:

COPY CODE

[vc_row padding_bottom="0" el_class="box1"][vc_column width="1/2"][product id="7411"][/vc_column][vc_column width="1/2"][product id="7413"][/vc_column][/vc_row][vc_row el_class="box2"][vc_column width="1/3"][product id="7394"][/vc_column][vc_column width="1/3"][product id="7414"][/vc_column][vc_column width="1/3"][product id="7427"][/vc_column][/vc_row]

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Author]

Posts