Support » Theme: Button » section with button.svg image

  • Resolved jasmin321

    (@jasmin321)


    I have a shop Plugin (WooCommerce) installed and on the shop page the final section is not displayed (with the button.svg image). In which file it is defined? Unfortunately, I can only find the entry in the style.css.

Viewing 8 replies - 1 through 8 (of 8 total)
  • Hi @jasmin321, can you please give me a link to view your issue?
    With “button.svg” are you referring to the WooCommerce “add to cart” button?

    Hello and thank you for your message.

    Here the link:
    http://steinerjasmin.bplaced.net/demo/shop/

    You can see the difference on the bottom between the shop page and another page.

    Hi @jasmin321,

    sorry for the wait. Try to add the following code to your theme’s style.css file.

    .post-type-archive-product #container #content, .single-product #container {
        border-bottom: 1px dashed #dddddd;
        margin: 0 0 4.5em;
        padding: 0 0 3em;
        position: relative;
    }
    
    .post-type-archive-product #container #content:after, .single-product #container:after {
    	content: "";
        display: block;
        background-color: #fff;
        background-image: url(img/button.svg);
        background-repeat: no-repeat;
        background-size: 132px 35px;
        background-position: -46px top;
        width: 88px;
        height: 35px;
        position: absolute;
        left: 50%;
        top: 100%;
        -ms-transform: translate(-50%, -16px);
        -webkit-transform: translate(-50%, -18px);
        transform: translate(-50%, -18px);
    }
    
    .single-product .product:after {
    	display: block;
        clear: both;
        visibility: hidden;
        content: "";
    }

    Tell me if it works.

    Hi @francbarberini,
    worked great thanks so much for your help!

    You’re welcome!
    It’s a pleasure to be helpful! Please mark the topic “resolved”.

    Bye

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    Thanks for helping out, francbarberini!

    Try to add the following code to your theme’s style.css file

    Just wanted to give a heads-up that folks should never edit their theme’s files directly, otherwise their changes will be overwritten every time the theme is updated, and all customizatinos will be lost.

    An easy way to add custom CSS is to install the Jetpack plugin and activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS. You could also install a standalone custom CSS plugin if you prefer.

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    An alternative route for adding theme customizations — if you need more than just CSS changes — is to create a child theme.

    Making a child theme means your changes won’t be overwritten when you update the theme. If you’re new to child themes, you can explore these guides:

    http://codex.wordpress.org/Child_Themes
    https://www.smashingmagazine.com/2016/01/create-customize-wordpress-child-theme/

    Keeping your theme up-to-date is strongly recommended to ensure you get bug fixes, security updates, and updates to keep the theme compatible with WordPress core.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘section with button.svg image’ is closed to new replies.