Personalize Products Using Variation Options for WooCommerce

This mini plugin for WooCommerce adds a text field to the single product page for customers to enter text which they can style dynamically on the frontend using variations.

The solution uses the variation attributes and values as declarations in CSS rules so your customers can choose what font family and font size they want to include when purchasing a product.

Variation attributes as used the property and variation values as the value for each property.

Works with block and non block themes for WordPress. Tested using Twenty Twenty Four and the Twenty Twenty default theme.

Variations & Fonts

Upload and activate like any other plugin.

You’ll also need your load your fonts and setup variations.

You can do this using your block theme settings for Typography or use PHP code like this :

add_action('wp_enqueue_scripts', 'load_custom_fonts');
function load_custom_fonts() {
    wp_enqueue_style('google-fonts', 'https://fonts.googleapis.com/css2?family=Alex+Brush&family=Dancing+Script&family=Great+Vibes&family=Lato&family=Open+Sans&family=Pacifico&family=Roboto&family=Sacramento&display=swap', false);
}

Attributes for variations should be configured like this :