Editing Product Page

  • Hello,

    Is there a way for me to edit shop page buttons, or can someone supply CSS so the shop buttons can replicate the button in the image provided. As well as this the product layout does not go with the theme as buttons are blue and each product has a white area behind it.

    As you can see the buttons do not replicate the theme. I would like to for text of ‘add to cart’ to be capital. With clear background white border and white writing, and when hovered over for it to change to red border, with white writing and clear background.

    See images provided to get a better understanding. I would just like the shopping page buttons to replicate the theme of the website, and to tidy up the product layout.As you can see in the images provided, each product as a white background underneath product images, I would like that to be get rid of. And I would like the product title to be white in Helvetica font.

    https://ibb.co/vB8zSKk
    https://ibb.co/8DKm2my
    https://ibb.co/Hqdkk7H

    Thanks,
    Burkay

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Support wpnomad a11n

    (@wpnomad)

    Hi @bkemal ,

    You can add the following CSS to make the product/shop buttons similar to theme’s default buttons:

    
.button.product_type_simple {
    background-color: rgba(131, 64, 64, 0) !important;
    border-style: solid !important;
    border-width: 3px 3px 3px 3px !important;
    border-color: #FFFFFF !important;
}

.woocommerce-page .button:hover {
    color: #FFFFFF !important;
    background-color: #2D2D2D !important;
    border-color: #F21204 !important;
}

    With the above CSS, the buttons would look like this:

    Default state:

    Link to image: https://i.ibb.co/rt29bT4/default.png

    Hover state:

    Link to image: https://i.ibb.co/C2pGRMq/hover.png

    I hope this helps!

    Thread Starter bkemal

    (@bkemal)

    @wpnomad PERFECT! Works really well. I wanted to ask is there a way for the letters to be capitalized in the buttons, and change the font in all WooCommerce sections to Helvetica font. I feel like it would suit better?

    https://carclubsolutions.crystalcreations.site/cart/
    As well as this, if you visit the link above the hover effect works, however the buttons are just solid blue. As well as this the ‘proceed to checkout’ button does not seem to function as intended or match the theme at all. When hovered over the button disappears but the text stays.

    As well as this, is there a way to edit the cart table border on the top. At the moment its solid white, I would like for it to change colour in order to match the background.

    Thanks for your help, really made a difference!!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Editing Product Page’ is closed to new replies.