Absolutely loving this theme and it’s built in functionality and flexibility. Quick question for you. Using WP 4.1, Integrity theme 3.1.1 and the shortcodes 2.6.1.

I’ve installed woocommerce and everything is great except for the message that appears on a single product page after clicking Add to cart. It’s obviously been modified by X to blend into the theme, but the view cart button is completely missing. Instead I get something that looks like this:

View Cart
“Product X” was successfully added to your cart.

I’m working on a localhost right now and can’t give you a url to check, but I’ve modified nothing on this page. I need to have the view cart button show up in the x-alert-info box you are using and float right. Any ideas on how best to resolve this? Thanks.

Please add the code below in your Appearance > Customize > Custom > CSS.

.woocommerce-message .button {
float: right;
}

You can further style the View Cart link which is by default styled as a button by Woocommerce. See http://htmldog.com/reference/cssproperties/ for more CSS properties you can utilize.

Hope that helps. 🙂

You’ve modified the successfully added product to cart box to use your x-alert-info styling so why didn’t you modify the View Cart button to use the button styling set by the theme? As it is now, no styling is being applied and there is no button. It’s just a text link that’s not even positioned correctly. I can custom code everything myself, but it seems like an oversight that your modifications leave it unusable as is. Thanks.

Thank you for your feedback, you can override woocommerce CSS to apply the default theme styling for the View Cart button. You’ll need to add the following jQuery script via Appearance > Customize > Custom > Javascript

jQuery(document).ready(function($){
	$('.single-product .x-alert ').removeClass('woocommerce-message');
});

This will override the theme styling and you’ll be able to see the button instead of View Cart link.

Hope this helps!

With regards to the jQuery script you provided, how would I place the button to the right of the text instead of the left? Here’s a screenshot of what it looks like currently:

URL

Thanks!

Thanks for writing in!

To achieve that, please add following CSS under Custom > CSS in the Customizer:

.single-product .x-alert-info {
    overflow: hidden;
}
.single-product .x-alert-info .button {
    float: right;
}

Hope this helps. 🙂

Thank you!

Cheers!