Return to previous page

Custom style in product page - by popcorner

This topic has 14 replies, 2 voices, and was last updated 5 years, 8 months ago ago by Rose Tyler

popcorner

Participant

March 12, 2019 at 09:50

Hi
I’d like to reach some custom style for the product page, that i don’t find the way to do.

Actually, i’d like
> all content (description, title, price, …) except for images are aligned center
> to create a border around the price (ideally a border that seems to be hand-drawned)
> not to have a black background when the image lightbox is on (opacity 50%)
> to get the “long” description just behind the cart button, in the bottom of the product info area
> to custom the “add to cart” button

Regards for your help !

#210754 Copied Theme version: 5.0

13 Answers

Rose Tyler

Support staff

March 12, 2019 at 09:57

Hello,

Your site under maintenance mode, so I can’t check it. Please provide temporary wp-admin access.
Also, provide screenshots for better understanding the desired result.
“Customize buttons” settings you can find in Theme Options > Styling.

Regards

#210755 Copied

popcorner

Participant

March 12, 2019 at 10:05

Hi
I just removed the maintenance mode
in private, the access infos for admin wp
Regards

Please contact administrator
for this information.

#210756 Copied
Rose Tyler

Support staff

March 12, 2019 at 10:48
Hello,

1) Please try to use this custom CSS code:
```
.single-product .product-information-inner *:not(img) {text-align: center !important;}
.single-product .product-information-inner ul {display: inline-block;}
.single-product .product-information-inner ul li {text-align: left !important;}
.single-product .product-information-inner table {margin-left: auto; margin-right: auto;}
.single-product .product-information-inner .product-share {justify-content: center;}
.single-product .product-information-inner .quantity {float: none !important;}
```
2) Provide URL of a page where the border should be added.
3)
```
.single-product .pswp__bg {
    opacity: 0.5 !important;
}
```
4) Provide a URL and give me more details about the desired result.

Regards
#210761 Copied
popcorner

Participant

March 12, 2019 at 11:19

Hi again , and thanks for help and code that works 😉 !

For the border on the price, please see a product exemple : https://bellemme.com/produit/bandeau-ajmer (around the price so)

Icheck for the style option for buttons in theme options

#210764 Copied
Rose Tyler

Support staff

March 12, 2019 at 11:32
Hello,

You’re welcome!
```
.single-product .product-content .price .woocommerce-Price-amount {
    border: 1px solid #e1e1e1;
    padding: 3px;
}
```
Regards
#210766 Copied
popcorner

Participant

March 12, 2019 at 14:27

perfect !

#210774 Copied

Rose Tyler

Support staff

March 12, 2019 at 14:30

Hello,

Feel free to ask if you have any other questions.

Regards

#210777 Copied
popcorner

Participant

March 20, 2019 at 07:22
HI
You gave me a code that works for custom a add to cart button in product page, but still don’t find how to custom the hover state of that button (?)
```
.single_add_to_cart_button.button, .quick-view-popup .product_type_variable, .quick-view-popup .product_type_grouped, .quick-view-popup .product_type_external {
    height: auto;
    font-size: .85rem;
    padding-top: .785rem;
    padding-bottom: .785rem;
    background-color: #CCCCCC !important;
    border: 1px solid #BEC73C;
    color: #fff;
    min-width: 190px;
    margin-right: .4rem;
}
```
Thanks !
#211186 Copied
Rose Tyler

Support staff

March 20, 2019 at 08:52

Hello,

Please try to use Theme Options > Styling > Customize buttons on hover state > Customize settings. If you do not achieve the desired result via these settings http://prntscr.com/n0cldr I will help you with the custom CSS code.

Regards

#211195 Copied

popcorner

Participant

March 20, 2019 at 09:30

thz thing is that i’d like this particular style ony applies to “add to cart button” not all dark or light button ; so if you can help me with custom css 😉

#211198 Copied
Rose Tyler

Support staff

March 20, 2019 at 09:37
```
.single_add_to_cart_button.button:hover{
    background-color: white !important;
    border: 1px solid #BEC73C;
    color: #BEC73C;
}
```
Regards
#211199 Copied
popcorner

Participant

March 20, 2019 at 09:51

thanks

Last question about the style in the product page ; is there a way to change the lightbox “close cross” image ?

#211201 Copied

Rose Tyler

Support staff

March 20, 2019 at 09:53

Please provide a screenshot.

Regards

#211202 Copied
Viewing 14 results - 1 through 14 (of 14 total)