Return to previous page

Product Page CSS - by BLenihan - on WordPress WooCommerce support

This topic has 38 replies, 5 voices, and was last updated 9 years, 8 months ago ago by Eva Kemp

BLenihan

Participant

March 5, 2015 at 23:30
Hello,

I am trying to customize a client’s product pages. Currently I am working on the price, although I will need to customize more. THis would be the code for that correct?
```
.product-information .price {
  float: left;
  width: 100%;
  margin-top: 25px;
  margin-bottom: 25px;
  font: 30px/30px 'Roboto', sans-serif;
}
```
I tried adding color: #fff !important; to no avail. Can you please assist? I’d also like to display the Product name instead of “Product Description”.

Thank you.
#47727 Copied Theme version: 1.7 WooCommerce version: 2.3.5
37 Answers

BLenihan

Participant

March 5, 2015 at 23:37

In fact, I need to make all of the black text on the product pages white or grey.

#47728 Copied
Eva Kemp

Support staff

March 6, 2015 at 11:59
Hello,

Please add this code in custom.css file:
```
.price {
   color: white !important;
}
```
To remove “Product Description” text use this code:
```
.meta-title span {
    display: none;
}
```
Regards,
Eva Kemp.
#47819 Copied
BLenihan

Participant

March 6, 2015 at 16:56

Thanks Eva,

Is there a way to sub in the product name where that would be?

#47972 Copied

BLenihan

Participant

March 6, 2015 at 16:59

The CSS for the white pretty much matched what I have, and had no effect. . . is it being over-written somewhere?

#47973 Copied

Eva Kemp

Support staff

March 6, 2015 at 17:50

Hello,

Please provide us with wp-admin panel credentials in Private Content.

Thank you.
Regards,
Eva Kemp.

#48006 Copied

BLenihan

Participant

March 9, 2015 at 14:28

Not sure if it went through on Friday

Please, contact administrator
for this information.

#48291 Copied

Eva Kemp

Support staff

March 10, 2015 at 09:17

Hello,

Please clear browser cache and check Shop page again.
The reason was you forgot to close } in the code before.

Thank you.
Regards,
Eva Kemp.

#48378 Copied

BLenihan

Participant

March 11, 2015 at 14:41

oh man. That’s disappointing.

One more request – CSS to modify the font/color for the product description that is White highlight with Black text?

#48781 Copied

BLenihan

Participant

March 11, 2015 at 14:48

Eva,

What I’d really like to do is change the Product description to the Name of the product. I’m hunting through PHP now.

I’ve already changed the font style.

#48782 Copied

Robert Hall

Support staff

March 11, 2015 at 15:10

Hello,

You can find this string in \themes\royal\woocommerce\content-single-product.php file on line 64

Regards,
Robert Hall.

#48786 Copied

BLenihan

Participant

March 11, 2015 at 16:31

IS there a way to dynamically call the product name?

#48821 Copied
BLenihan

Participant

March 11, 2015 at 16:42
Got it. For anyone else, just insert this PHP on 64:
```
<h4 class="meta-title"><span>
<?php if (etheme_get_option('product_page_productname')): ?>
             <div class="product-title">
             <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
             </div>
<?php endif ?>
</span></h4>
```
#48826 Copied
Robert Hall

Support staff

March 11, 2015 at 16:54

Hello,

We’re glad to hear it!
If you have any questions feel free to contact us.
Have a good day!

Regards,
Robert Hall.

#48832 Copied

BLenihan

Participant

March 11, 2015 at 18:13

Robert,

Two more:

I modified it (you can see it at:http://waldanwatches.com/product/chronograph-chronometer/)

I’m looking to remove the hyper link, but when I do it turns blue or black.

I’d also like to position the price right under the product name. I can’t seem to get it to work.

#48861 Copied
Robert Hall

Support staff

March 11, 2015 at 18:19
Try to add this code in custom.css file after removing hyper link.
```
.product-title a{
color:#816D58;
}
```
To move price to right position use following code.
```
.product-information .price{
text-align:right;
}
```
Regards,
Robert Hall.
#48863 Copied
BLenihan

Participant

March 26, 2015 at 22:30

Well, I’m back with more.

I’m still having trouble eliminating the negative space between the price and the product name.
example

I also need to get the next/previous product pop ups to appear in front of the menu. Right now they appear behind it.

#52657 Copied
Eva Kemp

Support staff

March 26, 2015 at 22:56
Hello,

Please add this code in custom.css file:
```
.ubermenu {
    z-index: 0 !important;
}
```
Check next/previous product pop ups after that.

To have price under product name use this code:
```
.product-information .price {
   margin-top: 0px !important;
}
.meta-title {
   margin-bottom: 0px !important;
}
```
Thank you.
Regards,
Eva Kemp.
#52663 Copied
BLenihan

Participant

March 27, 2015 at 15:05

Eva,

That worked awesome, thank you. You’re guys support is the best of any wordpress-related product I’ve ever used.

Thank you so much!

(I’m sure I’ll have more. . .)

#52822 Copied

BLenihan

Participant

March 27, 2015 at 15:08

Actually, the Z-index put the drop downs behind all content. . . can I set the Z-index of the prev/next buttons instead?

#52824 Copied

BLenihan

Participant

March 27, 2015 at 15:14

Got it. Now trying to remove the underline on the product picture expand button. . .

#52829 Copied
Robert Hall

Support staff

March 27, 2015 at 15:25
Hello,

You can use this code in custom.css file.
```
.product-lightbox-btn{
text-decoration: none !important;
}
```
Regards,
Robert Hall.
#52834 Copied
BLenihan

Participant

March 30, 2015 at 22:31

The plodding continues! (You guys are a great help though).

http://waldanwatches.com/product/world-time-chronometer/

Trying to figure out the black like in the title.

Also want to remove the lightbox on the product catalog images and just load them into the product image window. Is there an easy way, the radio boxes in the settings seem to have no effect.

#53410 Copied
Eva Kemp

Support staff

March 31, 2015 at 13:06
Hello,

Please use this code in custom.css file:
```
.meta-title:after {
background: none !important;
}
```
As I see there is no lightbox icon in single product page.
Could you please clarify with more details?

Thank you.
Regards,
Eva Kemp.
#53549 Copied
BLenihan

Participant

March 31, 2015 at 14:16

Its the catalog images, I would prefer that they just load in the product image carousel instead of a light box.

#53589 Copied

BLenihan

Participant

March 31, 2015 at 16:44

Got another one, it appears there is a conflict between the Slider and Uber Menu regarding the Z-index. Have you seen that before?

#53650 Copied

Eva Kemp

Support staff

April 1, 2015 at 15:23

Hello,

Are you talking about Shop page? Do you want the products to be loaded in the product image carousel on the Shop page?
Sorry, but there is no such possibility in Woocommerce settings.
Could you please clarify what the conflict is between the Slider and Uber Menu? What issues are you experiencing?

Regards,
Eva Kemp.

#53932 Copied

BLenihan

Participant

April 1, 2015 at 16:09

On a product page:
http://waldanwatches.com/product/world-time-chronometer/

When you click on the three catalog images they bring up a lightbox, I would prefer they just swap the image in the carousel (like how the next/prev arrows work).

#53968 Copied

Brian Johnson

Member

April 1, 2015 at 16:28

Please disable ligtbox in theme options->sigle product page and woocommerce->settings->products->display.

With best regards
Brian Johnson

#53975 Copied

BLenihan

Participant

April 1, 2015 at 16:32

They are both disabled. Lightbox is still appearing.

#53979 Copied
Tagged: page, persuasive, product, templates, woocommerce, wordpress
1 2

Viewing 30 results - 1 through 30 (of 38 total)