This topic has 44 replies, 4 voices, and was last updated 4 years, 11 months ago ago by Rose Tyler
Hello, I use the wc marketplace plugin and I notice a display problem in the product page. When I activate the mention “sold by (seller)”, it is unreadable in the product page. Could you fix this problem? Please, thank you.
See screenshot below:
https://drive.google.com/file/d/1Qs83nZ6wCOS0zL3KGucfGe8al-g3y_Bm/view?usp=sharing
https://drive.google.com/file/d/175uh5BdBlVX4hsK-rKfME52hoQ5YjDMk/view?usp=sharing
https://drive.google.com/file/d/1D0rg9DKbsJr9dHsl8vhhlVr0szjgWNKK/view?usp=sharing
Hello,
To get a result like this http://prntscr.com/n6rs7i you need to add this custom CSS code
.product-view-mask2 .footer-product .by-vendor-name-link:before {
content: "\e916";
font-family: 'xstore-icons';
color: white;
font-size: 14px;
}
.product-view-mask2 .footer-product .by-vendor-name-link {
font-size: 0;
}
Here is a list of our icons https://xstore.8theme.com/xstore-icons/
OR https://fontawesome.com/v4.7.0/icons/ –
.product-view-mask2 .footer-product .by-vendor-name-link:before {
content: "\f2dd";
font-family: FontAwesome;
color: white;
font-size: 14px;
}
.product-view-mask2 .footer-product .by-vendor-name-link {
font-size: 0;
}
Also this code:
.etheme_products .product-view-mask2 .footer-product .pre_order_loop,
.products-slider .product-view-mask2 .footer-product .pre_order_loop {
font-size: 0;
padding: 8px 0;
}
.etheme_products .product-view-mask2 .footer-product .pre_order_loop:hover,
.products-slider .product-view-mask2 .footer-product .pre_order_loop:hover {
background: #333333;
}
.etheme_products .product-view-mask2 .footer-product .pre_order_loop:before,
.products-slider .product-view-mask2 .footer-product .pre_order_loop:before {
content: "\f2dd";
font-family: FontAwesome;
color: white;
font-size: 14px;
}
.etheme_products .product-view-mask2 .footer-product,
.products-slider .product-view-mask2 .footer-product {
bottom: 0rem;
}
will get a great result where you are using [8THEME] Products element.
Regards
Hello, it doesn’t work, I also use the yith pre order plugin and I have the same display problem. Could you paste the code for me and check? please thank you.
Hello,
Where have you added the code?
http://prntscr.com/n6xw2o
Please add this code in Theme Options > Custom css > Global custom CSS:
.product-view-mask2 .footer-product .by-vendor-name-link:before {
content: "\e1000";
font-family: 'xstore-icons';
color: white;
font-size: 14px;
}
.product-view-mask2 .footer-product .by-vendor-name-link {
font-size: 0;
}
.product-view-mask2 .footer-product .by-vendor-name-link:hover,
.product-view-mask2 .footer-product .by-vendor-name-link:hover {
background: #333333;
}
.product-view-mask2 .footer-product .by-vendor-name-link,
.product-view-mask2 .footer-product .by-vendor-name-link {
font-size: 0;
padding: 5px 0;
}
.etheme_products .product-view-mask2 .footer-product .pre_order_loop,
.products-slider .product-view-mask2 .footer-product .pre_order_loop {
font-size: 0;
padding: 8px 0;
}
.etheme_products .product-view-mask2 .footer-product .pre_order_loop:hover,
.products-slider .product-view-mask2 .footer-product .pre_order_loop:hover {
background: #333333;
}
.etheme_products .product-view-mask2 .footer-product .pre_order_loop:before,
.products-slider .product-view-mask2 .footer-product .pre_order_loop:before {
content: "\f23d";
font-family: FontAwesome;
color: white;
font-size: 14px;
}
.etheme_products .product-view-mask2 .footer-product,
.products-slider .product-view-mask2 .footer-product {
bottom: 0rem;
}
Clear cache before checking the result.
Regards
Hello, this works perfectly for sellers and pre-orders on the home page but I notice that the pre-order icons do not appear on the shop page. Could you correct that? Please, thank you.
See screenshot :
https://drive.google.com/file/d/1ELc4V_JsywRMyKjFerEZ1nPNvmpHzt1d/view?usp=sharing
Hello,
Please replace all this code https://prnt.sc/n79bnk by the next one:
.product-view-mask2 .footer-product .pre_order_loop,
.product-view-mask2 .footer-product .by-vendor-name-link {
font-size: 0;
padding: 10px 0;
}
.product-view-mask2 .footer-product .by-vendor-name-link:before {
content: "\e1000";
font-family: 'xstore-icons';
color: white;
font-size: 14px;
}
.etheme_products .product-view-mask2 .footer-product .by-vendor-name-link,
.products-slider .product-view-mask2 .footer-product .by-vendor-name-link {
padding: 5px 0;
}
.etheme_products .product-view-mask2 .footer-product .pre_order_loop,
.products-slider .product-view-mask2 .footer-product .pre_order_loop {
padding: 8px 0;
}
.product-view-mask2 .footer-product .by-vendor-name-link:hover,
.product-view-mask2 .footer-product .pre_order_loop:hover {
background: #333333;
}
.etheme_products .product-view-mask2 .footer-product .pre_order_loop:before,
.products-slider .product-view-mask2 .footer-product .pre_order_loop:before,
.product-view-mask2 .footer-product .pre_order_loop:before {
content: "\f23d";
font-family: FontAwesome;
color: white;
font-size: 14px;
}
.etheme_products .product-view-mask2 .footer-product,
.products-slider .product-view-mask2 .footer-product {
bottom: 0rem;
}
Regards
Thank you, it works but why is the pre-order icon not clickable (it does not point to any link)? Is that normal?
See the screenshot below:
https://drive.google.com/file/d/1eLiW38vydXQ30ynEaJZrsZN515IjvOqG/view?usp=sharing
How does it work with Storefront theme?
I do not see any link here – https://prnt.sc/n7ft9o
Regards
ok thank you, but there is another display problem because when I change the style of the product effect, the added icons do not appear.
See the screenshot below:
https://drive.google.com/file/d/1Szb_DoWa7PQfCtxNZ1Ss1Hj3pq38YiW4/view?usp=sharing
https://drive.google.com/file/d/1pxU7RPB3qMX9U_n53tOTc-x3kd2NNSs2/view?usp=sharing
The code was specified for the particular type of hover effect http://prntscr.com/n7g2w9 so will not work for another type.
Regards
It’s a shame then, could you then make a custom code for the current style because I prefer Product content effect buttons on hover middle bottom? Please, thank you.
https://drive.google.com/file/d/1pxU7RPB3qMX9U_n53tOTc-x3kd2NNSs2/view
Here is the new code:
.etheme_products .product-view-mask .footer-product .pre_order_loop,
.etheme_products .product-view-mask .footer-product .by-vendor-name-link,
.products-slider .product-view-mask .footer-product .pre_order_loop,
.products-slider .product-view-mask .footer-product .by-vendor-name-link {
padding: 7px 9px;
}
.product-view-mask .footer-product .by-vendor-name-link,
.product-view-mask .footer-product .pre_order_loop{
background: #222222;
}
.product-view-mask .footer-product .by-vendor-name-link:hover,
.product-view-mask .footer-product .pre_order_loop:hover {
background: #333333;
}
.product-view-mask .footer-product .pre_order_loop,
.product-view-mask .footer-product .by-vendor-name-link {
font-size: 0;
padding: 7px 18px;
border-right: 1px solid #444444;
}
.product-view-mask .footer-product .by-vendor-name-link:before {
content: "\e1000";
font-family: 'xstore-icons';
color: white;
font-size: 14px;
}
.product-view-mask .footer-product .pre_order_loop:before {
content: "\f23d";
font-family: FontAwesome;
color: white;
font-size: 14px;
}
.product-view-mask .footer-product .by-vendor-name-link {
margin: 0px;
}
Regards
I don’t want to bother you but could you make a custom css code for the following product style (Product content effect information mask) ? Because this one seems better than the previous one. Please, thank you.
https://drive.google.com/file/d/1AedZJ_ilylWqLc0jCcMz1zrbYKHrDLUQ/view?usp=sharing
You’re welcome!
Regards
I don’t want to bother you but could you make a custom css code for the following product style (Product content effect information mask) ? Because this one seems better than the previous one. Please, thank you.
https://drive.google.com/file/d/1AedZJ_ilylWqLc0jCcMz1zrbYKHrDLUQ/view?usp=sharing
.etheme_products .product-view-info .footer-product .pre_order_loop,
.etheme_products .product-view-info .footer-product .by-vendor-name-link,
.products-slider .product-view-info .footer-product .pre_order_loop,
.products-slider .product-view-info .footer-product .by-vendor-name-link {
padding: 7px 7px;
}
.product-view-info .footer-product .by-vendor-name-link,
.product-view-info .footer-product .pre_order_loop{
background: #222222;
}
.product-view-info .footer-product .by-vendor-name-link:hover,
.product-view-info .footer-product .pre_order_loop:hover {
background: #333333;
}
.product-view-info .footer-product .pre_order_loop,
.product-view-info .footer-product .by-vendor-name-link {
font-size: 0;
padding: 7px 18px;
border-right: 1px solid #444444;
}
.product-view-info .footer-product .by-vendor-name-link:before {
content: "\e1000";
font-family: 'xstore-icons';
color: white;
font-size: 14px;
}
.product-view-info .footer-product .pre_order_loop:before {
content: "\f23d";
font-family: FontAwesome;
color: white;
font-size: 14px;
}
.product-view-info .footer-product .by-vendor-name-link {
margin: 0px;
}
Regards
Okay, thank you very much!
You’re welcome!
Regards
Hello, I come back to you because my customer also asks me for the custom css code for the following product style ( Product content effect buttons on hover middle). Please thank you!
https://drive.google.com/file/d/1Szb_DoWa7PQfCtxNZ1Ss1Hj3pq38YiW4/view
Hello,
.etheme_products .product-view-mask3 .footer-product .pre_order_loop,
.etheme_products .product-view-mask3 .footer-product .by-vendor-name-link,
.products-slider .product-view-mask3 .footer-product .pre_order_loop,
.products-slider .product-view-mask3 .footer-product .by-vendor-name-link {
padding: 7px 10px;
}
.product-view-mask3 .footer-product .by-vendor-name-link,
.product-view-mask3 .footer-product .pre_order_loop{
background: #222222;
}
.product-view-mask3 .footer-product .by-vendor-name-link:hover,
.product-view-mask3 .footer-product .pre_order_loop:hover {
background: #333333;
}
.product-view-mask3 .footer-product .pre_order_loop,
.product-view-mask3 .footer-product .by-vendor-name-link {
font-size: 0;
padding: 7px 7px;
}
.product-view-mask3 .footer-product .by-vendor-name-link:before {
content: "\e1000";
font-family: 'xstore-icons';
color: white;
font-size: 14px;
}
.product-view-mask3 .footer-product .pre_order_loop:before {
content: "\f23d";
font-family: FontAwesome;
color: white;
font-size: 14px;
}
Regards
You must be logged in to reply to this topic.Log in/Sign up