Tips and Tricks HQ Support Portal › Forums › WP eStore Forum › WP eStore F.A.Q/Instructions › WP eStore – Customizing the buttons (changing the button images)
Tagged: add to cart button, Change button image, customizing buttons, payment, Subscribe button, wp buttons, WP eStore, WP eStore WP Buttons
- This topic has 14 replies, 5 voices, and was last updated 7 years, 2 months ago by yvonne.r.
-
AuthorPosts
-
May 16, 2012 at 12:45 am #6330adminKeymaster
We define minimal CSS style for the eStore buttons. Our aim is to make the plugin blend into your existing theme as much as possible. The best way to do that is to let the button styles come from your theme. This way all the buttons (eStore and non-eStore) on your site look similar.
Our customers love this philosophy but we understand that sometimes you maybe using a theme that doesn’t style the input buttons very nicely. If you are in this situation then there are two things you can do to get around it:
1) Use a custom button image (so that you can make the purchase buttons look exactly how you want it to look).
2) Apply some CSS to the eStore buttons to make it look a bit nicer.
Option 1: Using a Custom Button Image to Customize the Buttons
The following post will explain how you can achieve this:
Option 2: Applying Custom CSS
WP eStore plugin has a custom CSS file called “wp_eStore_custom_style.css” where you can add your custom CSS. This option requires a little bit of CSS knowledge so we recommend you watch this video tutorial to gain some basic knowledge:
Few Examples:
Add the following block of CSS in the “wp_eStore_custom_style.css” file to add some padding and margin to the “Add to Cart” button:
.eStore_button{
padding:3px 10px 3px 10px;
margin: 5px 0px 5px 0px;
}Use the following block of CSS code to make the button width 300px:
.eStore_button{
width: 300px !important;
}Use the following block of CSS code to add a grey border and background color to the button:
.eStore_button{
border: 1px solid #B3B3B3;
background: #BFBFBF;
}Custom CSS Plugin
You can use the following custom CSS plugin to add your CSS tweaks:
http://www.tipsandtricks-hq.com/wordpress-custom-css-plugin-6413
December 31, 2013 at 1:00 am #45097erickguerreiroMemberHi, this is my website [http://superestampas.com/membros/] and I am trying to put my custom Add to Cart button on right side and the price on left side.
How can I do that? I can’t adjust it correctly because the price label/value don’t move no matter what values I set on eStore_price_value and eStore_price_label. Thanks for your help! Happy new year!!
December 31, 2013 at 2:18 am #45098adminKeymasterHi, Are you trying to customize the fancy product display template? This post is actually for customizing the payment button (not fancy display).
January 2, 2014 at 3:50 pm #45099erickguerreiroMemberYes, I’m.
January 2, 2014 at 5:16 pm #45100aceSpectatorLet me help,
In …/plugins/wp-custom-css/wp-custom-css.css
update
.eStore_button {
margin: 5px 0;
padding: 3px 10px 3px 400px;
}
to
.eStore_button {
margin: 5px 0;
}
…/plugins/wp-cart-for-digital-products/wp_eStore_style.css
update
.footer-left-content {
float: left;
vertical-align: middle;
}
to
.footer-left-content {
float: right;
vertical-align: middle;
}
update
.eStore-product-fancy2-footer .footer-right {
float: right;
font-size: 16px;
font-weight: bold;
vertical-align: middle;
}
to
.eStore-product-fancy2-footer .footer-right {
float: left;
font-size: 16px;
font-weight: bold;
margin-top: 11px;
vertical-align: middle;
}
January 3, 2014 at 1:35 pm #45101erickguerreiroMemberNice tip, dear ace. Now it is exactly how I wanted.
Thank you very much!
July 8, 2014 at 9:39 pm #45102johnzenaSpectatorYour website says you may integrate the WP Buttons plugin with the WP eStore plugin but can’t find any documentation on how to do this. The only thing it shows is to use a url under eStore and a shortcode under WP Buttons
July 9, 2014 at 1:46 am #45103adminKeymasterRead the following documentation:
You will use the product purchase link as the target URL when you create a button in the WP Button Creator Plugin.
July 9, 2014 at 9:04 pm #45104johnzenaSpectatorThank You, wonder why it isn’t on the documents explanation page. Works perfectly.
July 9, 2014 at 10:38 pm #45105johnzenaSpectatorIt also works with coupon making plugins that let you add links. Takes them directly to ebay instead of a secondary sales page.
July 10, 2014 at 1:44 am #45106adminKeymasterIt is listed in the documentation here:
http://www.tipsandtricks-hq.com/ecommerce/wp-estore-documentation
July 20, 2014 at 12:41 am #45107johnzenaSpectatorThanks to this tutorial with the buy now and subscription links I didn’t have to buy another shopping cart for my xSitePro based website. With the help of a little php coding this works awesome. Thanks again.
July 16, 2017 at 9:53 pm #45108yvonne.rMemberHi, I tried to customize the subscribe button using CSS as described here but it didn’t work.
What I did: I entered the following code into “wp_eStore_custom_style.css”
.eStore_subscribe_button{
border: 1px solid #B3B3B3;
background: #ffc60b;
}
And I am using this code to add the button on the site: [wp_eStore_subscribe_button id=”1″]
Could you please help?
Thank you.
July 17, 2017 at 2:43 am #45109adminKeymasterShare a link to the page where you have the subscribe button so we can inspect it. Also, tell us what change you want to make so we can give you the CSS tweak for it.
July 19, 2017 at 12:35 am #45110yvonne.rMemberOkay, I found out that it was just a cache issue in Chrome. When using another browser I can see the changes, so it works perfectly, thank you!
-
AuthorPosts
- You must be logged in to reply to this topic.