Return to previous page

Compare page - by Gry4you - on WordPress WooCommerce support

This topic has 18 replies, 3 voices, and was last updated 6 years, 2 months ago ago by Rose Tyler

Gry4you

Participant

February 12, 2018 at 00:03

Hi,

I would like to change some settings on compare page (I used YITH WooCommerce Compare plugin)
https://gry4you.com/wp-content/uploads/2018/02/compare-page_1.jpg

This is my compare page settings:
https://gry4you.com/wp-content/uploads/2018/02/compare-page_2.jpg

#yith-woocompare table.dataTable.compare-list tbody th, #yith-woocompare table.dataTable.compare-list tbody td {
border-right: 1px solid #e7e7e7;
border-top: 1px solid #e7e7e7;
padding: 10px;
vertical-align: middle;
}
#yith-woocompare table.compare-list tbody th {
width: 150px;
max-width: 150px;
min-width: 150px;
overflow: hidden;
text-align: left;
color: #333;
background-color: #f2f2f2;
text-transform: uppercase;
font-weight: 700;
font-size: 14px;
}

I try to use this code, but it doesn’t work:
https://gry4you.com/wp-content/uploads/2018/02/compare-page_3.jpg

yith-woocompare table.dataTable.compare-list tbody th, #yith-woocompare table.dataTable.compare-list tbody td {
border-right: 1px solid #e6e6e6;
border-top: 1px solid #e6e6e6;
padding: 10px;
vertical-align: middle;
}
#yith-woocompare table.compare-list tbody th {
width: 150px;
max-width: 150px;
min-width: 150px;
overflow: hidden;
text-align: center;
color: #0b1fba;
background-color: #fafafa;
text-transform: uppercase;
font-weight: 700;
font-size: 15px;
}

Maybe you will find my mistake inside css code?

Regards
Damian

#184713 Copied Theme version: 4.18 WooCommerce version: 3.3.1

17 Answers

Gry4you

Participant

February 12, 2018 at 00:26

Hi,

I found the second problem with with the word compare on single product page.

Word compare has a white color and there is invisible:
https://gry4you.com/wp-content/uploads/2018/02/compare-page_4.jpg

Compare button hover has black backgroung color and blue link:
https://gry4you.com/wp-content/uploads/2018/02/compare-page_5.jpg

How to change color of compare button on single product page using these settings (standard and hover)?
standard settings:
color: #0b1fba;
background-color: #fafafa;
text-transform: uppercase;
font-weight: 700;
font-size: 15px;

hover settings:
color: #000000;
background-color: #fafafa;
text-transform: uppercase;
font-weight: 700;
font-size: 15px;

Regards
Damian

#184715 Copied Theme version: 4.18 WooCommerce version: 3.3.1

Gry4you

Participant

February 12, 2018 at 10:24

Hi,

I found the style.css file on yith-woocommerce-compare/assets/css and I made the settings changes.

Problem solved:)

Regards
Damian

#184767 Copied Theme version: 4.18 WooCommerce version: 3.3.1

Olga Barlow

Support staff

February 12, 2018 at 17:23

Hello,

We are glad that you sorted out.

Regards

#184851 Copied

Gry4you

Participant

February 12, 2018 at 23:33

Hi,

I would like to set the email header background image and footer backdround image (WooCommerce Email Styles).
https://gry4you.com/wp-content/uploads/2018/02/woocommerce-email-styles_1.jpg

I am trying to modify the email template file email-header.php, email-footer.php and email-styles.php.

I’d put the image in “background” in the header table found in email-header.php like below:

<!– Header –>
<table border=”0″ cellpadding=”0″ cellspacing=”0″ width=”600″ id=”template_header” background=”<?php echo home_url(); ?>/wp-content/uploads/2018/02/woocommerce-header-email-gry4you.png”>
<tr>
<td id=”header_wrapper”>
<h1><?php echo $email_heading; ?></h1>
</td>
</tr>
</table>
<!– End Header –>

However, it isn’t work. How I can modify the template header and footer to add a image?

Regards
Damian

#184881 Copied Theme version: 4.18 WooCommerce version: 3.3.1

Gry4you

Participant

February 14, 2018 at 10:14

Hi,

Problem solved. I used YITH WooCommerce Email Templates:)

Regards
Damian

#185038 Copied Theme version: 4.18 WooCommerce version: 3.3.1

Rose Tyler

Support staff

February 14, 2018 at 10:36

Hello,

We are glad that you sorted out.

Regards

#185042 Copied

Gry4you

Participant

February 15, 2018 at 15:07

Hi,

I would like to change compare icon on single product page.

I try to use this css code:

.product-content .compare {
font-family: ‘Montserrat’;
text-transform: none;
font-weight: 600;
font-size: 14px;
background-color: transparent;
text-align: center;
color: #0b1fba;
}
.product-content:hover .compare:hover {
text-transform: none;
font-weight: 600;
font-size: 14px;
background-color: transparent!important;
font-family: ‘Montserrat’;
text-align: center;
color: #000000;
}

It is working for only inscription “Compare”, but for the icon “Compare” didn’t work.

I used the same code to wishlist on single product page and it worked!

.yith-wcwl-add-to-wishlist a:not(.alt) {
text-transform: none;
font-weight: 600;
font-size: 14px;
font-family: ‘Montserrat’;
text-align: center;
color: #0b1fba;
}
.yith-wcwl-add-to-wishlist a:not(.alt):hover {
text-transform: none;
font-weight: 600;
font-size: 14px;
font-family: ‘Montserrat’;
text-align: center;
color: #000000;
}

Where I made a mistake in the compare css code?

Regards
Damian

#185200 Copied Theme version: 4.18 WooCommerce version: 3.3.1

Gry4you

Participant

February 15, 2018 at 15:10

It mean this icon:
https://gry4you.com/wp-content/uploads/2018/02/compare_icon_1.jpg

Regards
Damian

#185202 Copied Theme version: 4.18 WooCommerce version: 3.3.1

Gry4you

Participant

February 15, 2018 at 15:20

Hi,

I have one more question! It is possible to change social icon type on single product page?

I used standard icon form XStore theme like this:
https://gry4you.com/wp-content/uploads/2018/02/social_icon_1.jpg

I would like to use other type of social icon, like this:
https://gry4you.com/wp-content/uploads/2018/02/social_icon_2.jpg

I have social icon png, but where I should to add?

Regards
Damian

#185205 Copied Theme version: 4.18 WooCommerce version: 3.3.1
Rose Tyler

Support staff

February 15, 2018 at 15:21
Hello,

Please see screenshot http://prntscr.com/if4m1s
you may use this code:
```
.product-content .compare:before {color: #0b1fba;}
.product-content .compare:hover:before {color: #000000;}
```
Regards
#185206 Copied
Rose Tyler

Support staff

February 15, 2018 at 15:28

Also, https://prnt.sc/if4pii, you may use such custom css code:
.fa-twitter:before {content: url('link_to_your_image');}

Regards

#185208 Copied

Gry4you

Participant

February 15, 2018 at 22:32

Hi Rose,

It’s working. Thank you very much!

Are you planning to add Instagram to social media (share button)?

I use the Instagram website, but there is no option to add Xstore theme!

Regards
Damian

#185233 Copied Theme version: 4.18 WooCommerce version: 3.3.1

Rose Tyler

Support staff

February 16, 2018 at 09:33

Hello,

You’re welcome!
Sorry, your question is a bit unclear to me. If you mean share functionality, if yes looks like this not available for Instagram.
Could you please explain in details your query to help me understand more?

Regards

#185261 Copied

Gry4you

Participant

February 16, 2018 at 11:44

Hi Rose,

In the Xstore theme you can use multiple buttons for sharing on social networks such as: Facebook, Twitter, VK, Pinterest, LinkedIn, Whatsapp, Skype and more like here:
https://gry4you.com/wp-content/uploads/2018/02/share_buttons_1.jpg

I would like to share pages or products on Instagram. Will be ever such an opportunity?

Regards
Damian

#185298 Copied Theme version: 4.19 WooCommerce version: 3.3.1

Rose Tyler

Support staff

February 16, 2018 at 12:38

Hi,

Instagram API doesn’t have share function and because of that, it can’t be included in share icons.

Best regards

#185309 Copied

Gry4you

Participant

February 16, 2018 at 13:06

Hi,

Ok, I understand.

How can I add Instagram share button to single page product?

Do you know how to change color of price before and currency symbol like here?
https://gry4you.com/wp-content/uploads/2018/02/price-before1.jpg

What kind of css editor do you use in the browser, which shows the codes like this screen:
https://gry4you.com/wp-content/uploads/2018/02/css_web_editor1.jpg

Regards
Damian

#185313 Copied Theme version: 4.19 WooCommerce version: 3.3.1

Rose Tyler

Support staff

February 16, 2018 at 13:18

Hello,

How can I add Instagram share button to single page product?

– unfortunately, this is not possible.
1. To give you answer, I need to be able to see the page. Could you temporary disable maintenance mode?
2. I use Chrome browser. To access the DevTools, open a web page or web app in Google Chrome. Either:
-Select the Chrome menu Chrome Menu at the top-right of your browser window, then select Tools > Developer Tools.
-Right-click on any page element and select Inspect Element.
The DevTools window will open at the bottom of your Chrome browser.

Regards

#185315 Copied
Tagged: compare, comparison, themes, woocommerce, wordpress
Viewing 18 results - 1 through 18 (of 18 total)