• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Damien Carbery - Website Development

Getting You Online & Keeping You There

Getting You Online & Keeping You There Get Started
  • Home
  • Services
  • Maintenance Plans
  • Portfolio
  • Blog
  • About Me
  • Contact
You are here: Home / Website Development / Style a shipping method to highlight it

Style a shipping method to highlight it

Published: May 4, 2020 (Updated: May 6, 2020)

Style a shipping method to highlight it
Insert CSS selectors into the markup to highlight a specific shipping method.

A local client bakes and delivers sourdough bread. He also offers a free collection option but would rather that customers would not choose it (it’s primarily there for long time loyal customers).

I looked at the markup on the Cart and Checkout pages and the shipping methods do *not* have any css classes! Their label elements have the ‘for‘ attribute set but it’s doesn’t appear to be useful. I tried to use CSS with wildcards but it didn’t work.

label[for=shipping_method_*_free_shipping*] { font-size: 60%; }

In a template file

I searched through the WooCommerce source for “woocommerce-shipping-methods” (the class of the ul element around the list of shipping methods) and found it in woocommerce/templates/cart/cart-shipping.php.

I was disappointed to see that there were no apply_filters() calls around the shipping methods items, only a do_action() call after them. The do_action() call is given the same information ($method and $index) that is used to create the shipping method label markup so I could work with this.

A touch of CSS

My solution is not pretty but it works. In the do_action() function I add a <style> block with a selector to target the appropriate shipping method label. In my case I was looking to change the font size of the only free shipping method so the code checks for the $method->method_id. To minimise the amount of CSS in the plugin I use a CSS variable for the font-size. The variable must be defined in another CSS file.

If other styles need to be set they will have to be added to the code. The lack of CSS classes on the label element is restrictive.

Make a specific shipping option smaller

The code

Enhancements

It would be a great help if the label elements had CSS classes e.g. “shipping_method free_shipping“. I might submit a pull request to WooCommerce to suggest this.

For my code, shoving <style> blocks into the markup is a bit ugly and not a good practice. If I converted the code to a PHP class I could store the selectors and add the <style> block to a wp_footer action. That’s for another day.

Related Posts

Free Shipping when One Item in Cart

Apply a free shipping coupon when the cart contains only one item.

Add Tracking Info to WooCommerce order

Use CMB2 to add a custom metabox to add tracking information to WooCommerce orders. The information is then added to the "Completed Order" email.

Change WooCommerce checkout field order

Changing the WooCommerce checkout fields display order is much simpler and more robust with the use of a 'priority' element in the field definition.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *


The reCAPTCHA verification period has expired. Please reload the page.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Blog Categories

  • Being Green
  • Food
  • Grammar
  • Just Strange
  • Laziness
  • Personal
  • Portfolio
  • Race Reports
  • Shudder
  • Typo
  • Website Development
  • WooCommerce Tips
  • Facebook
  • Twitter

Copyright © 2013–2023 Damien Carbery · Using Genesis Framework · Privacy Policy