Ask your WordPress questions! Pay money and get answers fast! (more info)

add extra class to woocommerce messages on specific pages

  • SOLVED

Hey!

I am currently hiding .woocommerce-info and .woocommerce-message using display:none;

Reason being our sales funnel gets very messy having extra messages and distractions.

Problem I have is that doing this also hides the 'login if youre returning customer' & 'do you have a coupon code?' sections at the top of our checkout page.

I wanted to know if there is a way to append a class to specific messages (coupons + login) on the checkout page only. This way I can hide the messages on the rest of the site and have those specific ones visible > !! I still want to hide the 'product X was added to cart etc' from the checkout page.

if there was some action/filter that would make those 2 sections have <div class="woocommerce-info show"> etc therefore gaining that extra control!

Many Thanks!!!


A

<!-- this is the reason for having a class added to specific messages -->


<div class="woocommerce-info">A subscription has been removed from your cart. Different subscription products can not be purchased at the same time.</div>

<div class="woocommerce-info showthis">Have a coupon? <a href="#" class="showcoupon">Click here to enter your code</a></div>

Answers (3)

2015-03-11

Kyle answers:

Hey there, you don't actually need anything new. Woo already applies unique classes to the body attribute you can utilize. So things like this:

body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout .woocommerce-message
{
display: block !important;
visibility: visible !important;
}


Those classes are there for all woo pages, e.g.: shop, single products, cart, thank you, etc.


awj comments:

Hey Kyle,

Thanks however this doenst help with my issue,

The 'added to cart successfully' message is inside the .woocommerce-info class which I want to keep hidding.

I am asking to specifically add a class to only the coupon + login messages/info so taht the rest of possible notifications can remain hidden.

<div class="woocommerce-message"><a href="http://test.beardedcolonel.info/cart/" class="button wc-forward">View Cart</a> "The Five Bladed Colonel" was successfully added to your cart.</div>

<div class="woocommerce-info">A subscription has been removed from your cart. Different subscription products can not be purchased at the same time.</div>

<div class="woocommerce-info showthis">Have a coupon? <a href="#" class="showcoupon">Click here to enter your code</a></div>


Kyle comments:

Yes, so don't change your existing CSS. Keep the

.woocommerce-info, .woocommerce-message{ display:none; }

but then add

body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout .woocommerce-message
{
display: block !important;
}


That will only show messages on the checkout page. Isn't that what you're looking for?


awj comments:

no, I need to hide some of the messages, and keep others visible. so its selective. The standard login/returning customer + enter coupon (which are inside woocommerce-info classes should be shown - however the extra message about subscriptions being removed etc (also inside the woocommerce-info class) should be hidden.


Kyle comments:

You can setup template files inside your theme using this tutorial http://docs.woothemes.com/document/template-structure/

The files you want are in the notices directory called notice.php: . The code in there is simple:

<?php foreach ( $messages as $message ) : ?>
<div class="woocommerce-info"><?php echo wp_kses_post( $message ); ?></div>
<?php endforeach; ?>


and success.php:

<?php foreach ( $messages as $message ) : ?>
<div class="woocommerce-message"><?php echo wp_kses_post( $message ); ?></div>
<?php endforeach; ?>


You will need to run a filter there to add the class. Something like:

<?php foreach ( $messages as $message ) {
if( $message == "do you have a coupon code?" OR $message == "'login if youre returning customer" ){
?>
<div class="woocommerce-info"><?php echo wp_kses_post( $message ); ?></div>
<?php
}}
?>



awj comments:

This eems to be what I need however im failing to implement it heres what I did:

<?php foreach ( $messages as $message ) : {
if( $message == "Have a Coupon?" OR $message == "Returning Customer?" ){
?>
<div class="woocommerce-info visible"><?php echo wp_kses_post( $message ); ?></div>
<?php
}}
?>
<?php foreach ( $messages as $message ) : ?>
<div class="woocommerce-info"><?php echo wp_kses_post( $message ); ?></div>
<?php endforeach; ?>


Kyle comments:

Echo out the $message variable before adding it into the conditional so you know what to compare against.


awj comments:

Hey, ive done this which isnt breaking the messages - however seems like nothing is taking effect - in this case the 'have a coupon' message should be visible but the 'returning customer' should be hidden. if I switch to false then all messages are .visible and if I switch to true, all messages are .hidden -

I think its close, but just missing something?

<?php foreach ( $messages as $message ) : ?>

<?php if (strpos( $message, 'Have a Coupon?' ) !== false) { ?>

<div class="woocommerce-info visible"><?php echo wp_kses_post( $message ); ?></div>

<?php } else { ?>
<div class="woocommerce-info hidden"><?php echo wp_kses_post( $message ); ?></div>
<? } ?>
<?php endforeach; ?>


Kyle comments:

You don't need to add the hidden "else" part, that can just be omitted. I would also consider boiling the strpos check to just the word Coupon, also keep in mind strpos is case sensitive. You can use stripos for non-case sensitive checking.


awj comments:

brilliant, thats done the trick - I didnt realise strpos was case sensitive.

Thanks very much for you help!


Kyle comments:

You're welcome! Let me know if you have any other questions.

Keep an eye on the core Woo templates every now and then to check for updates too.

2015-03-11

Shoeb mirza answers:

.woocommerce-info, .woocommerce-message {display:none;}

.woocommerce-checkout .woocommerce-info, .woocommerce-checkout .woocommerce-message {display:block;}

2015-03-11

Arnav Joy answers:

can you show me your site ?