BugWP logo BugWP
Back to Community
Home / Community / Theme → Blocksy

How to Customize WooCommerce Elements in Blocksy: Quick View, Buttons, and More

28 threads Sep 16, 2025 Theme → Blocksy

Content

Many users of the Blocksy theme want to tailor their WooCommerce shop's appearance, from modifying the Quick View button text to adjusting product archive layouts. This guide compiles common customization requests and their solutions based on community support threads.

Common Customization Challenges

Users frequently seek to change specific text strings, alter product page layouts, add or remove elements, and style WooCommerce components to match their site's design. These changes often aren't available as built-in options in the customizer.

How to Change Text Strings (Like Quick View Button Text)

A common request is to change default text, such as the "go to product" text in the Quick View window.

Solution: Use the Loco Translate plugin. This method allows you to find and retranslate any theme string without editing core files.

  1. Install and activate the Loco Translate plugin.
  2. Navigate to Loco Translate → Plugins.
  3. Select either Blocksy or Blocksy Companion.
  4. Click on New Language or edit an existing translation.
  5. Use the search function to find the string you want to change (e.g., "go to product").
  6. Enter your new text in the translation field and save the changes.

This method is also effective for changing other strings, such as the "Specs" label in the review extension to "Information." The plugin can be deactivated after making changes, as the translations are saved to your site's files.

Adding Custom CSS for Styling

Many visual tweaks, like modifying the Quick View window's appearance, require custom CSS.

Solution: Add custom CSS through the WordPress Customizer.

  1. Go to Appearance → Customize.
  2. Navigate to Additional CSS.
  3. Enter your custom CSS rules here. For example, to target the Quick View button, you might use a selector like .quick-view-button.
  4. Publish your changes.

Note: The exact CSS selector needed might require inspecting your page elements with a browser's developer tools.

Modifying WooCommerce Product Tabs

Some users wish to remove a specific product tab, like 'Additional Information,' while keeping others.

Solution: Use a code snippet in your child theme's functions.php file.

// Remove the Additional Information tab
add_filter('woocommerce_product_tabs', function($tabs) {
    unset($tabs['additional_information']);
    return $tabs;
}, 98);

This code successfully removes only the specified tab without affecting others like 'Description' or 'Reviews.'

Aligning Prices on Product Archive Pages

Product titles of varying lengths can cause prices and buttons to appear misaligned in grid layouts.

Solution: Apply CSS to enforce a minimum height for the title element, creating a consistent space.

.woocommerce-loop-product__title {
    min-height: 80px;
    margin-bottom: 0 !important;
}

Adjust the min-height value in pixels (px) until the alignment looks consistent across all products.

Important Considerations

  • Child Theme: Always use a child theme when adding custom code to avoid losing modifications after a theme update.
  • CSS Specificity: Sometimes, CSS rules need to be more specific or include !important to override existing theme styles.
  • Feature Limitations: Some requested features, like displaying SKUs on archive pages or changing related product heading tags, are not natively supported in the free version of Blocksy and may require custom development or a plugin.

Conclusion

Customizing your WooCommerce store with Blocksy often involves a combination of translation plugins for text, custom CSS for styling, and targeted code snippets for functionality. For more complex changes beyond the scope of the free theme, exploring dedicated WooCommerce plugins or custom development might be necessary.

Related Support Threads Support