Return to previous page

Product page display problem - by jimmy-17

This topic has 44 replies, 4 voices, and was last updated 6 years, 7 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

jimmy-17

Participant

April 5, 2019 at 12:08

Ok thank you, but could you also make a custom css code for “Product content effect light” in order to be able to use all the product styles proposed by the theme? Please, thank you.

https://drive.google.com/file/d/1lbS1XwpF6Pa0u3-_GW-iTO3D0KF0FwIg/view?usp=sharing

#212036 Copied

Rose Tyler

Support staff

April 5, 2019 at 12:58

Hello,

I have sent this topic to our developers. Improvements for displaying of mentioned icons will be added in the next update of XStore. You will be able to delete the previous custom css code, after the update.
Please wait. The update will be released after 11 April.

Regards

#212038 Copied

jimmy-17

Participant

April 5, 2019 at 13:00

Great, thank you!

#212039 Copied

Rose Tyler

Support staff

April 5, 2019 at 13:09

You’re welcome!

Regards

#212040 Copied

jimmy-17

Participant

May 7, 2019 at 21:41

Hello, I notice that the add to cart icon does not appear for the products of the sellers in the shop (product style buttons on hover bottom). Could you fix this problem and add the fix in the next theme update? Please, thank you.

link to see the problem;
https://citarature.com/product-category/livres/

#213517 Copied

John Holden

Participant

May 8, 2019 at 05:05

Hi,

Try below code

.footer-product {
    bottom: 2.45rem;
}

.footer-product .add_to_cart_button {
    background: #222222;
    font-size: 0;
}

.footer-product{
    overflow: visible;
}

Regards,
Hung PD

#213519 Copied

jimmy-17

Participant

May 8, 2019 at 12:15

Hello, it works but not everything is displayed on the same line. Could you correct that? Please thank you.

see screenshot:

https://drive.google.com/file/d/1mhlLQElx-8WRzSvgeQuIBN3Z-P9vAo8J/view?usp=sharing

#213543 Copied

Olga Barlow

Participant

May 8, 2019 at 17:46

Hello,

Check now, please. Is it what you want?

Regards

#213562 Copied

jimmy-17

Participant

May 9, 2019 at 02:33

yes, but it would be even better if each icon had the same size. Like this for example with the style of buttons on hover middle:
https://drive.google.com/file/d/1l_pmV7CjFqt4O3dShxaosYLs_n1iJu2D/view?usp=sharing

#213574 Copied

John Holden

Participant

May 9, 2019 at 04:48

Hi,

Please send me link you mentioned in the video, I will take a look

Regards,
Hung PD

#213579 Copied