Tagged: 

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • January 10, 2018 at 5:09 pm #895739
    Benoit

    Hi Guys,

    I would like to change the style of the price ( font size & color) on the Product purchase button while keeping the original style for the product slider price.

    when I’m using the following code the price of the Product purchase button change as expected, but it also changes the price style of the product slider which I want to keep original.

    #top.single-product .price span,
    #top.single-product del, #top.single-product ins{
    text-decoration: none;
    font-size: 24px;
    line-height: 24px;
    font-weight: 400;
    padding: 5px 8px 5px 5px;
    background-color: #af2731;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    color: #ffffff;
    }

    I would like to know if it’s possible to have a different style for the price on the Product purchase button & Products slider.

    Thanks in advance for your help.

    January 11, 2018 at 3:52 am #895953
    John Torvik

    Hey Benoit,

    We can apply the rule to affect only the purchase button using an exclusive class provided by the body tag. But, please, provide to us your website link.

    Best regards,
    John Torvik

    January 12, 2018 at 3:42 pm #896608
    Benoit

    Hi John,

    Thanks for your help.
    What I want is to be able to apply the rule to affect only the price of the single products page which is created with the advanced layout editor and the products purchase button available on the advanced layout editor/plugin addition.

    I used this code but it also applies the rule to the price on the products slider as well as product grid and related products. I want it to be applied only to the single products page price.

    #top.single-product .price span,
    #top.single-product del, #top.single-product ins{
    text-decoration: none;
    font-size: 24px;
    line-height: 24px;
    font-weight: 400;
    padding: 5px 8px 5px 5px;
    background-color: #af2731;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    color: #ffffff;
    }

    Please see the attached screenshot.

    Screenshot

    • This reply was modified 6 years, 11 months ago by Benoit.
    January 12, 2018 at 3:57 pm #896616
    Benoit

    Never mind, I found the solution…

    #top.single-product .av-woo-purchase-button .price span{
    text-decoration: none;
    font-size: 24px;
    line-height: 24px;
    font-weight: 400;
    padding: 5px 8px 5px 5px;
    background-color: #af2731;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    color: #ffffff;
    }

    This is the code used if someone else needs it….

    January 13, 2018 at 6:38 am #896852
    Rikard

    Hi,

    Great, glad you found a solution and thanks for sharing, much appreciated. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.