Styling the Option’s Description

Adding a description beneath the shipping option is a great way to give customers a little extra information about their selected option. Often this is used to describe the differences between options available for choosing. It could show the difference in arrival times, or explain some necessary requirements that make it different. No matter the reason, styling may be necessary to ensure all text lines up appropriately, and to set it apart from the option title.

Let’s begin by looking an a sample description without any styling:

Styling the Text to Stand Out

By default, the description will have the same styling as regular body text. In the case of this theme, that means the text is the same as the option title itself as seen above. It presents a lot of information in a small area, which is not very appealing to the eye. With a little CSS, you can quite easily change its appearance so that it is more clearly a sub-note for the option. In this example, we are going to shrink the font size and italicize the text.

.betrs_option_desc { font-style: italic; font-size: 0.9em; }

By adding the CSS above, our description should now look like this:

Handling Multiple Options with Descriptions

Offering more than one shipping option presents another tricky styling issue. When multiple shipping options are available, a radio button is added before the shipping option’s title. This allows the customer to select which option they want. This radio button pushes the option title to the right, but not the description.

For some, you may prefer the description to span the entire width as seen above. However, the descriptions can be padded if you prefer to see the descriptions line up with titles. Please note that the padding size may vary. The padding used here is based on default styling for the Storefront WooCommerce theme. There is also a second line that removes the padding from the order summary page. It is not needed on this page because there are no options available once the customer has placed their order. Their selected option will be the only one available in the shipping section. (The CSS below includes the font styling from the previous section, but this is optional and does not need to be added.)

.betrs_option_desc { font-style: italic; font-size: 0.9em; padding-left: 22px; }
.betrs_option_desc.betrs_order_review { padding-left: 0px; }

  • Was this article helpful ?
  • yesno