Return to previous page

Product Page CSS – Back again - by BLenihan

This topic has 19 replies, 3 voices, and was last updated 9 years ago ago by Brian Johnson

BLenihan

Participant

April 20, 2015 at 17:41

Hi guys, still working on customizing the product page at whttp://waldanwatches.com/product/chronograph-chronometer-0195c/

I’m looking to turn the stars in the review section so they are visible.

I also would like to add another email link below the description that says “Looking for something custom?”

Any help is much appreciated!

#58147 Copied Theme version: 1.7 WooCommerce version: 4.2

18 Answers

Eva Kemp

Support staff

April 20, 2015 at 20:52

Hello,

As I see the stars are visible:
http://storage3.static.itmages.com/i/15/0420/s_1429559414_4968026_30f7918ca1.png
Could you please clarify with more details where we can see the issue?
Also please show a screenshot where the text “Looking for something custom?” is located. Where do you want to create other email link?

Thank you.
Regards,
Eva Kemp.

#58216 Copied

BLenihan

Participant

April 20, 2015 at 21:58

The stars where you leave a review, to select how many stars – not the ones from a previous review. (You have to be logged in to see this content).

I would like to create the other link next to the existing one.

See screen for both

http://www.awesomescreenshot.com/image/114713/af30df26bf87aeeb76650a055ef84797

#58242 Copied

Brian Johnson

Member

April 21, 2015 at 10:22

Hello

1. This option is avalible only for logged in users. Please read here how to create registration page. You may use default top bar links for it.
We cannot see the stars because we are not logged in users. Please provide us with wp-admin credentials or create register link for customers on site.
2.The email link can be added via overwriting wishilst plugin files. We strongly recommend to do it within Child theme which comes within your zipped theme package from themeforest.net. Please read here about Child theme.
You should move add-to-wishlist.php from wp-content\plugins\yith-woocommerce-wishlist\templates to your wp-content\themes\royal-child folder. Then open add-to-wishlist.php and edit line 33. You may add your link after the following line: <?php echo apply_filters( 'yith-wcwl-browse-wishlist-label', $browse_wishlist_text )?></a>

With best regards
Brian Johnson

#58346 Copied

BLenihan

Participant

April 21, 2015 at 18:05

Hi Brian.

I am logged in and cannot see stars – I have previously created an account for you. I will include the credentials below.

Please, contact administrator
for this information.

#58533 Copied
BLenihan

Participant

April 21, 2015 at 18:13
I added the modification to line 33, and moved the file into the child theme, and there is no change in the appearance of the page.

Thoughts?
```
	    <div class="yith-wcwl-wishlistexistsbrowse <?php echo ( $exists && ! $available_multi_wishlist ) ? 'show' : 'hide' ?>" style="display:<?php echo ( $exists && ! $available_multi_wishlist ) ? 'block' : 'none' ?>">
	        <span class="feedback"><?php echo $already_in_wishslist_text ?></span>
	        <a href="<?php echo esc_url( $wishlist_url ) ?>">
	            <?php echo apply_filters( 'yith-wcwl-browse-wishlist-label', $browse_wishlist_text )?>
	        </a>
            <?php echo apply_filters( 'yith-wcwl-browse-wishlist-label', $browse_wishlist_text )?>fdhghgdh</a>
	    </div>
```
#58537 Copied
BLenihan

Participant

April 21, 2015 at 18:21

If I drop it outside the div, it prints out the mumbo jumbo. But definitely not what I am looking for. I want the email icon, followed by “custom text”, sent to a different email address.

This displays Browse Wishlistdsfgfsjhgs

#58542 Copied

Brian Johnson

Member

April 22, 2015 at 09:57

Hello

1. Please provide us with ftp credentials to your site and give us the link code you would like to insert.
2. Concerning the stars issue please remove all background values for p.stars span elemnts in style.css within the Child Theme.

With best regards
Brian Johnson

#58653 Copied
BLenihan

Participant

April 22, 2015 at 16:10
changed
```
p.stars span {
  background: url(images/staticks/star-silver.png) repeat-x left 0;
  float: left;
  height: 20px;
  position: relative;
  width: 75px;
}
```
to

background: none; Also tried white, and transparent.

Same result. The stars are there, I can see them in firebug, but they aren’t visible.

Please, contact administrator
for this information.
#58765 Copied
Brian Johnson

Member

April 22, 2015 at 16:15
Hello

1.Please remove this line from child theme style.css completely(background) like
```
p.stars span {
  float: left;
  height: 20px;
  position: relative;
  width: 75px;
}
```
And please make it for all star elements in Child Theme.

With best regards
Brian Johnson
#58768 Copied
Brian Johnson

Member

April 22, 2015 at 16:18

Sorry. We are unable to login. Please check your ftp credentials.

With best regards
Brian Johnson

#58770 Copied

BLenihan

Participant

April 22, 2015 at 16:22

Got the star issue!

If we can get that link squared away – I think we are set!

Thank you for your help.

#58772 Copied

BLenihan

Participant

April 22, 2015 at 16:25

Try this

Please, contact administrator
for this information.

#58773 Copied

Brian Johnson

Member

April 22, 2015 at 16:42

Please provide us with email or code for email in private content which you want to place after wishlist liks.

With best regards
Brian Johnson

#58780 Copied

BLenihan

Participant

April 22, 2015 at 17:13

use the link mentioned before, not a mailto:

Please, contact administrator
for this information.

#58789 Copied
Brian Johnson

Member

April 22, 2015 at 19:02
Hello

I have placed add-to-wishlst.php into the woocommerce folder within the Child Theme. You may find that i have added following line: <text class="new_mail"><a href="http://waldanwatches.com/contact/">contact us</a></text>
Then I placed this code into the style.css within the child theme:
```
.new_mail {
	position:absolute;
	     -moz-transform:    translate(280px,-20px);
     -o-transform:      translate(280px,-20px);
     -webkit-transform: translate(280px,-20px);
     transform:         translate(280px,-20px);
}
```
You may use .new_mail css selector to adjust link style.
Please check your site now.

With best regards
Brian Johnson
#58818 Copied
BLenihan

Participant

April 23, 2015 at 15:38

Excellent, thanks so much for your help Brian!

#59185 Copied

BLenihan

Participant

April 23, 2015 at 15:46

Question: What controls the icon that appears?

#59192 Copied

Brian Johnson

Member

April 24, 2015 at 12:00

Hello

You may change icon to any Awesome font offer to you or select custom background image for it using background url.You may read this about background value:
http://www.w3schools.com/cssref/pr_background-image.asp
This is the list of font Awesome icons:
http://astronautweb.co/snippet/font-awesome/
Please use this code as an example to control icon:
.new_mail a:before{content:"\f195"!important;color:white!important;background:none};

With best regards
Brian Johnson

#59448 Copied
Viewing 19 results - 1 through 19 (of 19 total)