Hello @mb299
To me, it looks like you need to control the number of columns in the shop. This can be easily done from the Customiser -> Product Archives -> Columns & Rows option. Check this article out for more information on the available options: https://creativethemes.com/blocksy/docs/woocommerce/product-archives/
Thanks.
Thread Starter
mb299
(@mb299)
Yes @cteduard ,
That’s true. I need to control the number of columns to get the image size right. But since the option to choose 1 coulmn is available, and it looks neat too, there should be some workaround to automatically adjust the couumn size so that even One picture looks good.
This is exactly where i need your help Eduard. Would you be able to help me out?
Thanks/Manish
Hello @mb299
I’m not sure what you mean by adjusting the column size. The column gets adjusted automatically, depending on the available screen space, and the layout options set in the Customiser.
Or am I misunderstanding something? If so, maybe you can provide some visual input to your question? 🙂
Thanks.
Thread Starter
mb299
(@mb299)
https://www.amazon.in/s?k=bags
If you look at the amazon website and how they display their products, it looks very neat and tidy. Its a side-by-side viewing.
Now I want to achieve either of the following:
- One column that has Image sized perfectly(300×300), with the content at the bottom of the image.
- Side-by-Side viewing, where image is on the left and the content on right.
Whatever you can help me achieve, I would be grateful Eduard.
Hope it makes sense now.
Thanks/Manish
Hello @mb299
Ah, I see. This is a different design.
Unfortunately, we do not have a design with the information on the right side, like described. This cannot be currently achieved using the provided options. However, we do have something similar planned for a future update, and I’ll let you know once that becomes available. We’ll have more to share as things develop.
Thanks.
Thread Starter
mb299
(@mb299)
Thanks @cteduard ,
Though I managed to achieve the side-by-side viewing through CSS but am not able to set the content aligned.
/* === DESKTOP VIEW (Ensures uniform side-by-side product layout) === */
.woocommerce ul.products {
display: flex;
flex-direction: column;
}
.woocommerce ul.products li.product {
display: flex !important; /* Force flex to avoid display block issue */
flex-direction: row;
align-items: center;
justify-content: flex-start;
padding: 20px;
border: 1px solid #ddd;
margin-bottom: 20px;
min-height: 250px;
}
/* Standardize product image size */
.woocommerce ul.products li.product .woocommerce-LoopProduct-link img {
width: 200px;
height: 200px;
object-fit: cover;
margin-right: 30px; /* Ensures uniform gap */
border-radius: 5px;
flex-shrink: 0;
}
/* Ensure image appears on the left and text on the right */
.woocommerce ul.products li.product .woocommerce-LoopProduct-link img {
width: 200px;
height: 200px;
margin-right: 20px;
flex-shrink: 0;
}
/* Ensure product details align properly */
.woocommerce ul.products li.product .product-content {
flex: 3; /* Ensures text takes proper width */
display: flex;
flex-direction: column;
justify-content: right;
margin-left: 20px; /* Ensures proper spacing between image & text */
}
You can have a look please
Thanks/Manish
Hello @mb299
I’m really sorry to say, but as per our support policy, we cannot offer assistance for debugging or implementing custom code. It would be recommended to contact a knowledgeable developer if you require assistance with matters that are outside of what’s provided in the software.
Thank you.
Thread Starter
mb299
(@mb299)
Absolutely. Thank you for your time Eduard.
And I do look forward to any of the future updates that you may have to offer.
