Return to previous page

Product page display problem - by jimmy-17

This topic has 44 replies, 4 voices, and was last updated 4 years, 11 months ago ago by Rose Tyler

jimmy-17

Participant

April 3, 2019 at 00:28

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

#211911 Copied Theme version: 5.1.6

43 Answers

Rose Tyler

Support staff

April 3, 2019 at 08:45

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;
}

http://prntscr.com/n6rtt9

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

#211922 Copied

jimmy-17

Participant

April 3, 2019 at 14:28

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.

#211946 Copied

Rose Tyler

Support staff

April 3, 2019 at 14:37

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

#211948 Copied

jimmy-17

Participant

April 3, 2019 at 17:16

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

#211956 Copied

Rose Tyler

Support staff

April 4, 2019 at 07:37

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

#211967 Copied

jimmy-17

Participant

April 4, 2019 at 14:19

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

#211984 Copied

Rose Tyler

Support staff

April 4, 2019 at 14:28

How does it work with Storefront theme?
I do not see any link here – https://prnt.sc/n7ft9o

Regards

#211985 Copied

jimmy-17

Participant

April 4, 2019 at 14:38

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

#211986 Copied

Rose Tyler

Support staff

April 4, 2019 at 14:43

The code was specified for the particular type of hover effect http://prntscr.com/n7g2w9 so will not work for another type.

Regards

#211987 Copied

jimmy-17

Participant

April 4, 2019 at 14:56

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

#211989 Copied

Rose Tyler

Support staff

April 4, 2019 at 15:11

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

#211992 Copied

jimmy-17

Participant

April 4, 2019 at 15:16

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

#211993 Copied

Rose Tyler

Support staff

April 4, 2019 at 15:25

You’re welcome!

Regards

#211994 Copied

jimmy-17

Participant

April 4, 2019 at 15:32

https://drive.google.com/file/d/1AedZJ_ilylWqLc0jCcMz1zrbYKHrDLUQ/view?usp=sharing

#211996 Copied

Rose Tyler

Support staff

April 4, 2019 at 15:53

.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

#212001 Copied

jimmy-17

Participant

April 4, 2019 at 15:56

Okay, thank you very much!

#212002 Copied

Rose Tyler

Support staff

April 4, 2019 at 15:59

You’re welcome!

Regards

#212003 Copied

jimmy-17

Participant

April 4, 2019 at 16:16

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

#212005 Copied

Rose Tyler

Support staff

April 5, 2019 at 07:24

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

#212031 Copied