You can add limited amounts of content and symbols to your webpage with just a small amount of CSS.
By using the ::after or ::before Pseudo-classes you can accent your pages with text and icons.
This can be a great trick to enhance your user experience by adding small text treatments to your website’s elements.
Example:
.attribute_pa_size_picker_label.swatch-label::before{
content: ‘Color Selected:’;
}
Using ::before or ::after to Enhance User Experience
A use case scenario: Recently, when I was updating a client’s WooCommerce product page, I noticed the selected product variation label could use a little bit of clarity.
The label is located under the swatches – however because the swatch size is so large the label – in this case the word ‘Blue’ – it’s relation to the word ‘Color’ so it can lose some of its communicative power.
The default option works just fine: most savvy ecommerce users would understand what the color-way labels would indicate especially after a few clicks. However, especially since the outbreak of the pandemic, developers need to take extra care in communicating effectively with less savvy shoppers. The internet marketplace is flooded with users who are just beginning to familiarize themselves to, not only online shopping, but using computer interfaces to accomplish tasks.
Our shopping experience could be enriched with the simple addition of ‘Color Selected:’ in front of the variation label.
After the change the color way selection is more clear.
How to use Google Chrome’s DevTools to Help Create CSS Styles
The best way, especially as a beginner, is to start by usine Google Dev Tools. Dev Tools is already installed in Google Chrome. When you have an element you wish to add text around, right click on it and scroll down on the menu to ‘Inspect Element’.
The Google Dev Tools will display. The panel can sometimes be on the right side of your browser window, sometimes on the bottom, or even in it’s own separate window.
Google Dev Tools is too big of a subject to discuss in detail here. Though don’t be nervous, even if you’ve never heard of Dev Tools, that’s okay, we will only discuss the features we need to use.
In the top right of the screen ( if the DevTools panel is on the right side of the screen. Top left of the DevTools is in the bottom of your browser window ) there is the elements panel. This shows you the source code of the website.
Next to, or below the Elements Panel, you’ll see the styles panel. This shows you the styles that are applied to the current selected html element on the web page.
Since I selected my label when I hit ‘Inspect Element’ the DevTools html panel is open to the panel. In the Elements Panel, I can see the source code that is rendering my colory way label. I can see that the text is not wrapped in a paragraph tag. So I can’t use a CSS to target the text that way.
I do see that instead there is a div wrapped around the text and it has a specific class. I can use that to target my CSS. The plugin makes a specific class for each product variation selection: attribute_pa_variation_picker_label. The developers made it super handy for us since we can create a different CSS rule for each variation label.
<div class="attribute_pa_color_picker_label swatch-label">Blue</div>
How to add content with the CSS Pseudo-classes ::before or ::after
Now that we have the class of our target we can craft our CSS rule.
In DevTools, in the Style Panel, hit the ‘+’ symbol, to the right of the :hov & .cls.
Hitting the ‘+’ symbol adds a new class to the current html element. In our case it created a CSS rule:
.attribute_pa_size_picker_label.swatch-label{
}
This is great, but by itself its not going to do us any good.
First, we want to add the pseudo-class ::before or ::after.
-In this case we want to use ::before because we want our text before the label color.
.attribute_pa_size_picker_label.swatch-label::before{
}
Next, we want to add our content. In this case, I want to add ‘Color Selected:’ so we can use the CSS content attribute to add our text.
.attribute_pa_size_picker_label.swatch-label::before{
content: ‘Color Selected:’;
}
Tip: Make sure to wrap your content in quotation marks and don’t forget the semicolon at the end.
A great thing about Google Chrome DevTools is that you can update the look of a web page instantly. You can add the content in the new rule you’ve create and get a preview of how it looks.
We hit the ‘+’ plus symbol earlier because we wanted DevTools to create a stylesheet for us. In the upper right corner of the new style you just created should be some text: ‘inspector-stylesheet:1’
Click this line of text and it will open the DevTools stylesheet. This will temporarily hold your styles that you want to render on the current page.
From here you can copy and paste all the styles you have generated since your last page load.
Tip: I commonly update/create styles in DevTools to get a good sense of how the changes will look when inserting or update page styles.
Save Your Newly Created Styles
Now that we have our newly created styles we need to save them somewhere in your site.
WordPress is great about placing custom CSS.
Three places to put custom css styles:
- Theme Options
- Most themes will have a Theme Options panel that you can place custom css.
- WordPress Customizer
- Add your custom styles in the Custom CSS panel
- Child Theme
- Since you should be using a child theme, the child theme style.css file can house your custom styles
- WP-Admin->Themes->Theme Editor – add your custom styles to the bottom of the style.css file in your child theme
- Note: Do not attempt this strategy if you don’t have a child theme.
- Since you should be using a child theme, the child theme style.css file can house your custom styles