How to insert a button to buy through my website

Marinaol · February 17, 2020, 9:35am

Hi there,

I would like to know how I can insert a button so people can buy certain products through my website.
At the moment I have a link to Eventbrite hyperlink but it’s a bit too complex.

Best,
Marina.

jade · February 17, 2020, 10:17am

Hi Marina,

If you use Woocommerce on your website, the products should all have the buy button for each product.

Hope this helps.

Marinaol · February 17, 2020, 10:22am

Hi Jade,

Thanks. Do you specially recommend Woocommerce, Shopify or something else?

Best,
Marina.

jade · February 17, 2020, 10:28am

Hi Marina,

Woocommerce can work with Wordpress so you can easily install it on your site so that you can maintain your products and sell them directly on your site whereas Shopify is another platform that is outside Wordpress.

You can read more from the articles below:

https://tinyurl.com/r4kny3w

Hope this helps.

Marinaol · February 19, 2020, 5:21pm

Hi Jade,

Thank you so much for your help.
I have installed Woocommerce. I just have a few questions about the design. At the moment this is how it looks:

I would like to know how could I delete “The Shop” on the top left.
Make the navbar and the logo In a woman’s body appear on black letters.
Move the image of the product and text an bit lower so it doesn’t mix with the navbar.
Delete this:

Delete this:

Also, I would like to ask you if you might know why I cannot edit the products of Woocommerce with cornerstone? Each time I try it, it appears this message:

Best regards,
Marina.

ruenel · February 20, 2020, 3:12am

Hello Marina,

1.) “The Shop” is the shop title. You can remove it by leaving the shop title as blank in X > Theme Options > Integrity > Shop Options.

2.) Before you make the logo text and menu items into a black color, you must update this code block:

body:not(.page-template-default) .masthead {
    position: absolute;
    width: 100%;
}

You will need to use this instead:

body.page-template-template-blank-4 .masthead {
    position: absolute;
    width: 100%;
}

Make sure that you remove this code:

.masthead {
    position: absolute;
    width: 100%;
}

And then you will also add this css code to change the color:

body:not(.page-template-template-blank-4) .masthead-stacked .x-brand.text {
    color: black;
}

body:not(.page-template-template-blank-4) .x-navbar .desktop .x-nav > li > a, 
body:not(.page-template-template-blank-4) .x-navbar .desktop .sub-menu li > a, 
body:not(.page-template-template-blank-4) .x-navbar .mobile .x-nav li a {
    color: black;
}

body:not(.page-template-template-blank-4) .x-navbar .desktop .x-nav > li > a:hover > span, 
body:not(.page-template-template-blank-4) .x-navbar .desktop .x-nav > li.x-active > a > span, 
body:not(.page-template-template-blank-4) .x-navbar .desktop .x-nav > li.current-menu-item > a > span {
    box-shadow: 0 2px 0 0 black;
}

3.) If you remove and update the css code in #1, then this should not be a problem.

4.) You can get rid of this by adding this custom css:

.single-product .product_meta {
    display: none;
}

5.) The review can be disabled in X > Theme Options > WooCommerce > Single Product > Reviews Tab.

6.) You can only edit the product page if you enable the Product Description tab in X > Theme Options > WooCommerce > Single Product > Description Tab. Keep in mind that you can only edit the description area and not the whole product page layout.

Hope this helps.

Marinaol · February 20, 2020, 11:47am

Hi Runel,

Thank you so much.

I have a few more questions.

About point 2, I am not sure if I got it. Should I then just write: body.page-template-template-blank-4, and nothing else.
I did that but it still looks like this:

And this is the code I wrote:

body.page-template-template-blank-4
body:not(.page-template-template-blank-4) .masthead-stacked .x-brand.text {
color: black;
}

body:not(.page-template-template-blank-4) .x-navbar .desktop .x-nav > li > a,
body:not(.page-template-template-blank-4) .x-navbar .desktop .sub-menu li > a,
body:not(.page-template-template-blank-4) .x-navbar .mobile .x-nav li a {
color: black;
}

body:not(.page-template-template-blank-4) .x-navbar .desktop .x-nav > li > a:hover > span,
body:not(.page-template-template-blank-4) .x-navbar .desktop .x-nav > li.x-active > a > span,
body:not(.page-template-template-blank-4) .x-navbar .desktop .x-nav > li.current-menu-item > a > span {
box-shadow: 0 2px 0 0 black;
}

I would like to delete the shadow that appears around the letters Add to cart when you hover the mouse over this button.

I added the code you told me to delete the category but it keeps appearing. What should I do? I added in Simple CSS.
On relation with this “You can only edit the product page if you enable the Product Description tab in X > Theme Options > WooCommerce > Single Product > Description Tab. Keep in mind that you can only edit the description area and not the whole product page layout.”
You mean that the Description Tab should be on, right?
How could I delete the magnifying glass on the image?

Best regards,
Marina.

ruenel · February 20, 2020, 9:40pm

Hello Marina,

1.) You should update it and use this:


body:not(.page-template-template-blank-4) .masthead-stacked .x-brand.text {
  color: black;
}

body:not(.page-template-template-blank-4) .x-navbar .desktop .x-nav > li > a,
body:not(.page-template-template-blank-4) .x-navbar .desktop .sub-menu li > a,
body:not(.page-template-template-blank-4) .x-navbar .mobile .x-nav li a {
  color: black;
}

body:not(.page-template-template-blank-4) .x-navbar .desktop .x-nav > li > a:hover > span,
body:not(.page-template-template-blank-4) .x-navbar .desktop .x-nav > li.x-active > a > span,
body:not(.page-template-template-blank-4) .x-navbar .desktop .x-nav > li.current-menu-item > a > span {
  box-shadow: 0 2px 0 0 black;
}

2.) To delete the shadow of the Add to cart button, please use this custom css:

.x-btn, .button, [type="submit"] {
  box-shadow: none;
}

3.) Because you added the code in correctly. There is an unclosed css block prior to the given code. You must update it first that code into this:

@media (max-width: 979px) {
     .masthead {
         position: relative;
         width: auto;
         background-color: #001937;
    }
}

.single-product .product_meta {
    display: none;
}

The Description tab is at the bottom. The left side is the product image and the right side consists of the price, short description, product meta and add to cart button.

5.) Because what you are trying to accomplish requires a template customization, we would highly to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released.

After the child theme is set up, please add the following code in your child theme’s functions.php file to remove the magnifying glass in the product page.

add_action( 'after_setup_theme', 'remove_woo_three_support', 11 );
function remove_woo_three_support() {
    remove_theme_support( 'wc-product-gallery-zoom' );
}

For your reference, please check this out:

system · March 1, 2020, 9:45pm

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.