Jump to content

Editing Shopping Cart References and Button Size

Recommended Posts

Hi

We have a dog treat shop website. Does anyone know how to do any of the following please?

1) On the product page, can the 'add to cart' button text be changed to 'add to doggy bag'?
2) On the product page, is there a way to resize the 'add to cart' button (i.e. reduce its size)?
3) When viewing the shopping cart, can the references (title and body text) to 'shopping cart' be updated to 'doggy bag'?

Thanks very much.

Link to comment
  • Replies 5
  • Views 1.2k
  • Created
  • Last Reply

Add to Home > Design > Custom CSS

/* rename cart title */
.cart-title {
    visibility: hidden;
}
.cart-title:before {
    content: "Dog Cart";
    visibility: visible;
}
/* resize add to cart */
.sqs-add-to-cart-button {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: 50px !important;
    color: red !important;
}
/* rename add to cart */
.sqs-add-to-cart-button-inner {
    visibility: hidden;
}
.sqs-add-to-cart-button-inner:before {
    visibility: visible;
    content: "The dog";
    position: absolute;
    display: block;
    text-align: center;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
15 hours ago, tuanphan said:

Add to Home > Design > Custom CSS


/* rename cart title */
.cart-title {
    visibility: hidden;
}
.cart-title:before {
    content: "Dog Cart";
    visibility: visible;
}
/* resize add to cart */
.sqs-add-to-cart-button {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: 50px !important;
    color: red !important;
}
/* rename add to cart */
.sqs-add-to-cart-button-inner {
    visibility: hidden;
}
.sqs-add-to-cart-button-inner:before {
    visibility: visible;
    content: "The dog";
    position: absolute;
    display: block;
    text-align: center;
}

 

Thank you @tuanphan.

Do you know why the button does not shorten on the right hand side and the text does not align to centre? I've also tried adding !important to the text alignment.

Do you know how to edit the body text of the empty shopping cart? It currently reads "You have nothing in your shopping cart. Continuing shopping"

I've attached screen captures showing both of these.

Thank you.

 

LongButton.jpg

ShoppingCartText.jpg

Link to comment

Archived

This topic is now archived and is closed to further replies.


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.