cloverjim Hi,
You had already done this before in this topic:
https://forum.tagdiv.com/topic/woo-product-box/
Also, what should I do about the box shadows?
Also, in the current state, the shadows look like the light is coming from the left and the shadow is formed on the right.
Is it possible to have the light come from the right so that the shadow appears on the left?
Since the site is right-to-left, I think having the light on the right and the shadow on the left would look better.
Thank you!
cloverjim Also, in the current state, the shadows look like the light is coming from the left and the shadow is formed on the right.
Is it possible to have the light come from the right so that the shadow appears on the left?
Since the site is right-to-left, I think having the light on the right and the shadow on the left would look better.
cloverjim Hi,
Could you help me with item 3?(Align the stars and the price on the same line) I don’t know CSS.
And regarding item 4, how can your block have both an “Add to Cart” option and a “Read More” option?
Thank you!
cloverjim Hi,
1. What is this error that appeared when I inserted the code?
2. And how can I add borders and shadows to these?
3. And how can I place the stars and the price on the same line?
4. Can a “View” button be added to these so that when the user clicks it, they are taken to the product page?
Thank you!
cloverjim Hi,
Yes, I want to have a similar layout on this demo template, for example in 4 columns.
However, when I added the previous codes, they didn’t work.
I would appreciate it if you could help me and show me how to implement a layout similar to the previous one on this demo template.
Thank you!
cloverjim Hi,
This is the demo template.
https://demo.tagdiv.com/newspaper_shop_makeup/
However, I added the previous codes but they didn’t work.
These were the previous codes:
.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;
}
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;
}
Website address: edubit.ir
Thank you!
cloverjim Hi,
1- On the cart page, the product price is displayed in the center.
How can I move it to the left?
2- In the mobile layout, how can I reverse all the elements compared to the demo?
Meaning, how can I make everything display from right to left?
Thank you!
cloverjim Hi,
1. The product title is not right-aligned; how can I align it to the right? (I’ve marked it with a red arrow.)
2. Also, the cart total is displayed too close together. How can I make it appear like the demo template? (I’ve marked it with a green arrow.)
It displays correctly on mobile.
3. On mobile, the price and quantity are also shown too close together.
I’ve marked this with a blue arrow.
Thank you!
cloverjim I meant the notification text “Product has been added to the cart.”
cloverjim Hi,
This code doesn’t align the text.
I want the comment text to be right-aligned.
Thanks.
cloverjim cloverjim Hi,
Why doesn’t the “View Cart” button go to the end of the row, like in the original version?
In the mobile version, the text is also left-aligned and stuck to the “View Cart” button. How can I fix this?
Thank you!
cloverjim Hi,
Where can I change the font of this text?
And how can I add a few pixels of spacing between the cross icon and the text?
Thank you!
cloverjim 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!
cloverjim Hi,
How can I replace the remove item icon with a remove button text on the left side?
Thank you!
cloverjim 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!
cloverjim 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.
cloverjim Hi,
Yes, that’s right. Inside the page editor it doesn’t change, but outside it does.
How can I change the position of the product quantity and price? Since the site is right-to-left, these two need to be swapped.
And how can I replace the remove item icon with a remove button text on the left side?
Thank you!
cloverjim Hi,
The icon is overlapping the text, and the “View Cart” button is stuck to the text.
How can I fix these issues?
Also, where can I change the length of this box?
Thank you!
cloverjim cloverjim Hi,
Thank you!
Where can I change the font of the ‘Product added to cart’ notification?
Thank you!
cloverjim cloverjim 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;
}
