WP eStore – Customizing the buttons (changing the button images)

[admin]

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:

https://support.tipsandtricks-hq.com/forums/topic/how-to-change-the-buy-button-images-for-estore-and-simple-shopping-cart-plugins

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:

http://www.tipsandtricks-hq.com/how-to-use-firebug-to-modify-your-wordpress-sites-css-video-tutorial-4037

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

[erickguerreiro]

Hi, 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!!

[admin]

Hi, Are you trying to customize the fancy product display template? This post is actually for customizing the payment button (not fancy display).

[erickguerreiro]

Yes, I’m.

[ace]

Let 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;

}

[erickguerreiro]

Nice tip, dear ace. Now it is exactly how I wanted.

Thank you very much!

[johnzena]

Your 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

[admin]

Read the following documentation:

https://support.tipsandtricks-hq.com/forums/topic/estore-how-to-use-a-text-link-to-accommodate-the-purchase-of-a-product

You will use the product purchase link as the target URL when you create a button in the WP Button Creator Plugin.

[johnzena]

Thank You, wonder why it isn’t on the documents explanation page. Works perfectly.

[johnzena]

It also works with coupon making plugins that let you add links. Takes them directly to ebay instead of a secondary sales page.

[admin]

It is listed in the documentation here:

http://www.tipsandtricks-hq.com/ecommerce/wp-estore-documentation

[johnzena]

Thanks 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.

[yvonne.r]

Hi, 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.

[admin]

Share 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.

[yvonne.r]

Okay, 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!

[Author]

Posts