Hi,
How can I create these boxes for WooCommerce products?
from this demo:
https://demo.tagdiv.com/newspaper_real_estate_pro/
Thank you!
Hello,
For woo commerce you can use the Woo Product Block block and the layout tab to make the settings to achive a layout similar with teh one from the provided image – https://i.imgur.com/8gk7beg.png
Thank you!
Hi,
Can you guide me to create a box similar to the ones in the image above?
I want each product to be displayed in its own box.
Thank you!
Hi,
Here are some fast settings, and I think that after you make them, you’ll know how to improve the layout. Set the Woo Product block, go to the layout tab and set it as in my screenshots – https://i.imgur.com/rKrAkkW.png https://i.imgur.com/KVGyRlo.png (you can adjust the paddings, seo tabs and the rest of the options after your needs). After that, from the Style tag, you can set the fonts and colors you want to use – https://i.imgur.com/OfbRrXB.png, then in the General tab, set a class for example, cls-wpb – https://i.imgur.com/Cf8zW0r.png then in css add this code – https://i.imgur.com/KHdGiQa.png to set the reviews in the bottom right. Then the last review is on mobile, set only one module per row – https://i.imgur.com/6J78MgO.png
I hope this will help you!
Hi,
How do the bottom edges get rounded?
I added the CSS code but nothing happened.
Thank you!
And what should I do to make the background color extend to the sides?
Thank you!
If you want a css to set the stars as in the example https://i.imgur.com/oeUPRdD.png
.cls-wpb .star-rating{
position: absolute!important;
left: 10%;
bottom: 7%;
}
.cls-wpb .price{
border-bottom: 2px solid #e7f0f1;
}
.cls-wpb .td-module-meta-info{
border-radius: 0 0 10px 10px;
min-height: 210px;
}
Hi,
Thank you very much for your guidance.
Can I also create such elements for posts?
Thank you!
Hi,
Can you please provide an example?
Thank you!
Hi,
I mean that each post should be displayed in a box like the products, and instead of the ‘Add to Cart’ button, there should be a ‘Read More’ button.
Also, how can I display the price instead of the ‘Add to Cart’ button?”
This is the code you gave me earlier.
.cls-wpb .star-rating{
position: absolute!important;
left: 10%;
bottom: 7%;
}
.cls-wpb .price{
border-bottom: 2px solid #e7f0f1;
}
.cls-wpb .td-module-meta-info{
border-radius: 0 0 10px 10px;
min-height: 210px;
}
Hi,
To have the same layout for the articles you can use the flex block 1, the settings will be similar and all of them can be done from the element settings.
To align the stars with the price please use this css:
.cls-wpb .td-excerpt{
padding-bottom: 16px;
border-bottom: 2px solid #e7f0f1;
}
html body div.cls-wpb .star-rating {
float: left;
}
and please remove this css:
.cls-wpb .star-rating{
position: absolute!important;
left: 10%;
bottom: 7%;
}
.cls-wpb .price{
border-bottom: 2px solid #e7f0f1;
}
Hi,
I have made the settings up to this point, but if possible, please tell me the necessary settings so that I can adjust them accordingly.
Because your experience regarding the aesthetics of the site is much better than mine.
Also, how can I adjust the margins of the product boxes so that they are equal on both sides?
This is the final code that I have added to the CSS.
.cls-wpb .td-excerpt{
padding-bottom: 16px;
border-bottom: 2px solid #e7f0f1;
}
html body div.cls-wpb .star-rating {
float: left;
}
.cls-wpb .td-module-meta-info{
border-radius: 0 0 10px 10px;
}
Thank you!
Hi,
A part of the settings can be done using tagDiv Composer and setting the padding on meta – https://i.imgur.com/AlIrzhL.png, another one is related to this css
.cls-wpb .td-module-meta-info{
border-radius: 0 0 10px 10px;
min-height: 210px;
}
That is making a height of at least 210px for the meta (section holding the text information for the product).
Hi,
1. I want the spacing of the elements to be equal on both sides.
For example, here the distance of the text from the top is less than the distance of the text from the bottom of the box.
2.And please guide me on how to make the post boxes the same as the product boxes.
Thank You!
HI,
1. Try this css: https://i.imgur.com/b4jZv2k.png
body div.td_woo_products_block div.td_woo_product_module .price{
margin-bottom: 0;
}
body div.td_woo_products_block .star-rating {
margin: 6px 0;
}
2. Here are 2 options, the one mentioned before using the flex block 1, this has the options for almost everything to set, but in case you want to have better control, then you can use a modul,e this can be created https://forum.tagdiv.com/modules-builder-newspaper-theme/ as you like to be and use a flex builder to display it https://forum.tagdiv.com/flex-block-builder-flex-loop-builder/
Thank you!
