Add Variation/Add to Cart Button to Non-Shop Page

  • Resolved derekbenedict

    (@derekbenedict)


    3 years, 7 months ago

    I added a shortcode into my website: [product_page id=16231]. I am having issues getting it to take up the width of the page because of the image associated with the product. How do I remove the image and also make the button say “Add to Cart”

    Any help would be much appreciated!

    Thanks,
    Derek

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

Viewing 6 replies - 1 through 6 (of 6 total)

  • Hi there!

    This looks like an issue with your theme compatibility with WooCommerce.

    You could try by adding the following CSS to your website at Appearance → Customizer → CSS.

    You can also add it to your child theme style.css.

    
.single_add_to_cart_button.button {
    color: white !important;
}
.single-product-main-image.alpha {
    display: none;
}
.template-page.content.av-content-small.alpha.units {
    width: 100%;
}
.summary.entry-summary {
    float: none !important;
    margin: 0 auto;
}
    Thread Starter derekbenedict

    (@derekbenedict)

    Thank you soo much Laura! I updated the website and it worked really well. Now I am trying to remove the header and SKU from it. Also, it took away the sidebar, how do I overwrite the product page ID so it doesn’t remove the sidebar.

    Thanks soo much! It is much appreciated.

    Thread Starter derekbenedict

    (@derekbenedict)

    Also, this is causing issues with the rest of the site as it has removed the sidebar from all pages and it also caused other store items to have this. Is there a way to just use this CSS for that page only? Sorry for all the questions but I really appreciate the help.

    Hey @derekbenedict,

    WordPress will add a “class” to the body tag of every page/post/product on the site that includes a unique ID. You can use that as a way to style pages selectively.

    I checked the source code of the page you linked to above. I scrolled down until I came to the <body> tag and checked the classes there. This is the one that’s unique to this page:

    
postid-14085

    What you can do is prefix any CSS styles you add with that class. Then they will only affect this page. Something like this:

    
.postid-14085 .single_add_to_cart_button.button {
    color: white !important;
}

    See if that gives you other options for how to style certain parts of the site.

    Cheers

    Hi @derekbenedict,

    We have not heard from you in a while so I’m marking this thread as resolved. If you do have more trouble with this, please open up a new topic and we’ll be happy to help you out.

    Take care

    Thread Starter derekbenedict

    (@derekbenedict)

    Thank you 3 sons, that resolved my question!

    Appreciate all the help.

    -Derek

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Add Variation/Add to Cart Button to Non-Shop Page’ is closed to new replies.

Tags