Adding button throughout the website?

Site URL: https://cliftoncreativeevents.com

I have multiple shop pages but I don't want anyone to be able to purchase anything directly. So I hid the add to cart button and want to add a contact button which links to the form page. But is there a way to have that button pop up on all product pages without having to individually add it in?

46 minutes ago, CCE said:

Site URL: https://cliftoncreativeevents.com

I have multiple shop pages but I don't want anyone to be able to purchase anything directly. So I hid the add to cart button and want to add a contact button which links to the form page. But is there a way to have that button pop up on all product pages without having to individually add it in?

What is the site wide password

Please see Add Button After Add to Cart Button of Product Detail Page.

Let us know how it goes.

Password is Clifton

14 minutes ago, creedon said:

Add the following to Settings > Advanced > Code Injection > HEADER.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page.

<script>

  $( ( ) => {
  
    /*
    
      add button after add to cart button of product detail page
      
      SS Versions : 7.0, 7.1
      
      */
      
    const text = 'View Shopping Bag';
    
    const url = '/cart';
    
    const targetAtttributeValue = ''; /* use _self (default, if left empty) |
                                         _blank | _parent | _top | framename */
    
    // do not change anything below, there be the borg here
    
    const $addToCartButton = $( '.sqs-add-to-cart-button-wrapper' );
    
    if ( ! $addToCartButton.length ) return;
    
    const buttonSelector = '.sqs-add-to-cart-button';
    
    let $additionalCartButton = $addToCartButton
    
      .clone ( )
      
      .removeAttr ( 'id' );
      
    let $e = $( buttonSelector, $additionalCartButton )
    
      .attr ( 'href', url )
      
      .removeAttr ( 'id ' +
      
        'data-collection-id ' +
        
        'data-item-id ' +
        
        'data-original-label ' +
        
        'data-product-type ' +
        
        'data-use-custom-label' )
        
      .find ( '.sqs-add-to-cart-button-inner' )
      
        .html ( text )
        
        .end ( );
        
    if ( targetAtttributeValue )
    
      $e.attr ( 'target', targetAtttributeValue );
      
    let $anchorTag = $( '<a>' );
    
    $.each ( $e.prop ( 'attributes' ), function ( ) {
    
      $anchorTag.attr ( this.name, this.value );
      
      } );
      
    $e
    
      .children ( )
      
      .appendTo ( $anchorTag );
      
    $e.replaceWith ( $anchorTag )
    
    $additionalCartButton.insertAfter ( $addToCartButton );
    
    } );
    
  </script>

This is for v7.0 and v7.1.

Let us know how it goes.

I put it in, it works great but it only works when I remove the code I put in to hide the add to cart and quantity options. Once I put my code back in, it also removes the new button. 

.product-quantity-input {
 display:none !important;
}

.sqs-add-to-cart-button-wrapper, {
 display:none !important;
}

Quote

Password is Clifton

That password doesn't work. I can take a look when the password works.

Just now, creedon said:

That password doesn't work. I can take a look when the password works.

Sorry, I didn't realize I wasn't case sensitive. Password is "clifton"

Ah I see the issue. Looking into solution now.

I have updated my code post. You should be able to reinstate your previous CSS.

Let us know how it goes.

It worked! Just had to deactivate and reactive my css for some reason but then your new code worked!

Thank you so much!

I have updated my code post. If your current code is working then no need to update. The new feature is support for a guard processor. This means you can write a custom script that can help decide if the code to add the button should run. Useful if you want the code to only run on certain pages. For example if your product has a certain tag or if the product has a particular sku. It's really up to you! 😀

Hi! 

Thanks @creedon, great code, exactly what I was looking for. I was wondering if there was any way to style the second button separately from the add to cart one? Right now, they both have the same css class and I can't differentiate them. Below is a screenshot from the website.

4 hours ago, prustique said:

I was wondering if there was any way to style the second button separately from the add to cart one?

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

Of course! Here it is:

https://www.rustique.uk/new-stock/p/nevers-faience-plate-wild-pig-cxwe5

On 9/20/2022 at 5:34 AM, prustique said:

I was wondering if there was any way to style the second button separately from the add to cart one?

This isn't a solution but starter code.

.sqs-add-to-cart-button-wrapper:last-child .sqs-add-to-cart-button {

  background-color : red !important;
  
  }

The trick here is the last-child pseudo-classes selector.

Let us know how it goes.

Thanks! It works well for the background but not for the text color - changes both buttons even with using the  last-child selector. I've used this:

.sqs-add-to-cart-button-inner:last-child {
  color: #172336;
}

It actually works now - not sure what I missed before. I just changed the text colour in this with the background and border:

.sqs-add-to-cart-button-wrapper:last-child .sqs-add-to-cart-button

Thanks!

Hello Creedon,

The secondary button under the add to cart button is working perfectly, but I just want to hide the original add to cart button from all product pages. Please, if you can, assist me.

See the attached screenshot. 

Looking forward to hearing from you shortly. 

Thanks, Umair

9 minutes ago, Umair786 said:

I just want to hide the original add to cart button from all product pages.

Please post the URL for a page on your site where we can see your issue.

A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

We can then take a look at your issue.

Hello Creedon,

The secondary button under the add to cart button is working perfectly, but I just want to hide the original add to cart button from all product pages. Please, if you can, assist me.

See the attached screenshot and website link as well.

https://www.araind.com/general-instruments/p/crile-artery-forceps.

Looking forward to hearing from you shortly. 

Thanks, Umair

13 hours ago, Umair786 said:

The secondary button under the add to cart button is working perfectly, but I just want to hide the original add to cart button from all product pages.

The duping code was meant for situations where you want two buttons.

Instead of duplicating the button you may want to use the following code.