INSOMNIA INC

Blur WooCommerce Product Images + My Account Page Blur Toggle

Table of Contents

This solution is for a reddit thread requesting functionality to blur sensitive images with a user controlled setting to enable or disable the blur once logged in. I was surprised to find that there was no OOB solution already existing, at least none that I could find.

What does it do?

This snippet adds a layer of discretion to your WooCommerce store via a tag targeted image blurring feature. When enabled any products tagged as ‘NSFW‘ will be blurred using a simple css filter. This will apply to all non-logged in users. Logged in users will see a Setting to toggle the blurring on or off. I’ve hooked this to the Dashboard in the my Account page but can be moved anywhere else you see fit.

Jump To Full Snippet

How it Works

Add Custom CSS to Blur Images

  • The function checks if a user is not logged in or has not enabled showing NSFW images.
  • If true, it adds CSS to blur images with the class nsfw-product-image.

Add Blur Class to NSFW Products

  • This function checks if a product has the ‘nsfw’ tag.
  • If yes, it adds the class nsfw-product-image to the product.

Blur Product Images in Shop and Archive Pages

  • The function checks if a product has the ‘nsfw’ tag.
  • If yes, it adds the class nsfw-product-image to the product images.

Blur Single Product Images

  • The function checks if a product has the ‘nsfw’ tag.
  • If yes, it adds the class nsfw-product-image to the single product images.

Add Setting to Dashboard

  • This function adds a form to the user’s account dashboard.
  • The form has a checkbox to show NSFW images and a button to save the setting.

Save User’s Preference

  • When the form is submitted, this function saves the user’s choice to the database (show or blur NSFW images).

Conditionally Add Blur Class

  • This function checks if a user is not logged in or has not enabled showing NSFW images.
  • If true, and the product has the ‘nsfw’ tag, it adds the class nsfw-product-image to the product images.

Customisation

You can customise a few things in this code to match your requirements:

  1. Target Tag: To change the target tag, modify the has_term('nsfw', 'product_tag', $post_id) condition in the code. Replace ‘nsfw‘ with your desired tag.
  2. Blur Level: To change the blur level, modify the filter: blur(10px); CSS code. Replace 10px with your desired blur level.
  3. Texts in My Account Page: To change the title text and label text in the My Account page, modify the following texts:
<h2>NSFW Image Setting</h2>
<label>Show NSFW images</label>

Support the support: If you’d be inclined to support my efforts, you can caffeinate me. This helps me actively assist others like yourself within the Reddit WordPress, WooCommerce, and Divi communities by providing unique solutions to non-standard requests and free alternatives to expensive subscription plugins.

Caffeinate Me

HOW TO ADD CODE SNIPPETS

To use the code snippet below, you’ll need to add it to your WordPress site. You can do this in one of two ways:

  1. Child theme functions.php: If you have a child theme set up, you can add the code to the functions.php file. Do not add to your themes functions.php as updating the theme will wipe the code.
  2. Code Snippets Plugin: If you’re not comfortable with coding or don’t have a child theme, you can use a plugin like Code Snippets to add the code. This plugin allows you to add code snippets to your site without modifying your theme files and provides a failsafe if anything goes wrong.
@ET-DC@eyJkeW5hbWljIjp0cnVlLCJjb250ZW50IjoiY3VzdG9tX21ldGFfZ2lzdF9jb2RlIiwic2V0dGluZ3MiOnsiYmVmb3JlIjoiIiwiYWZ0ZXIiOiIiLCJlbmFibGVfaHRtbCI6Im9uIn19@