Hi,
This because the styling rules from the css file in your theme are applied as follows
just an example
.woocommerce-page .product {
color: # 000;
}
and on the 2nd link the .woocommerce-page class is missing between the <body></body>tags
Or you have to add custom css. Or you have to make sure that the missing class for the body tags is present.
This can be done in different ways, but it will require a little custom code anyway. I do not know to what extent you are familiar with this?
Regards
Thanks for the info. I can do basic custom code/css if you can let me know what and where to add it. 🙂
Hi,
Try adding this
.products h2 {
display: inline-block;
float: none;
position: relative;
width: auto;
min-height: 42px;
color: #404040;
font-size: 16px !important;
font-weight: bold;
line-height: 14px;
text-transform: uppercase;
}
.products a.button {
display: inline-block;
margin: 0;
padding: 10px 20px 10px 20px;
border: none;
border-radius: 4px;
color: #fff;
background: #e96656;
font-size: 12px;
text-align: center;
text-transform: uppercase;
}
(Method 1)
https://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/
Regards
Thanks! Works great but the product titles are not centered. I tried adding text-align: center; to products h2 but it didn’t work. What did I miss?
li.product {
text-align: center;
}
Thank you so much, crslz!!
You’re welcome. I notice some differences between the 2 pages (see image)
https://pasteboard.co/IOxcZVS.jpg
1) CHANGE
.products h2 {
...
min-height: 42px;
}
TO
.products h2 {
...
min-height: 44px;
}
2) ADD
li.product .price {
float: left;
width: 100%;
height: auto;
min-height: 40px;
padding: 10px 0;
line-height: 20px;
text-align: center;
}
3) ADD
.products a.button:hover {
color: #fff;
background: #cb4332;
}
If this works for you, can you mark this topic as ‘resolved’.
Regards
We haven’t heard back from you in a while, so I’m going to mark this as resolved – if you have any further questions, you can start a new thread.
