Created
June 15, 2024 23:54
-
-
Save Acephalia/8b6a0af3bc2fb75ed4c26722bf3fd34c to your computer and use it in GitHub Desktop.
WooCommerce Blur Product Images With Tag + Enable or Disable In My Account
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* @snippet WooCommerce Blur Product Images With Tag + Enable or Disable In My Account | |
* @description This snippet will redirect a user to a seperate page depending on created order status. | |
* @author u/acephaliax | |
* @source. https://insomniainc.com/resources/code-snippets/woocommerce/blur-woocommerce-product-images-my-account-page-blur-toggle/ | |
* @compatiblity Last tested on WooCommerce 8.9.2 | |
* @community r/wordpress, r/woocommerce | |
* @caffeinate https://buymeacoffee.com/acephaliax | |
*/ | |
// Add custom CSS for blurring images | |
function add_custom_blur_css() { | |
// Check if the user is not logged in or if logged in, does not have the 'show_nsfw' setting enabled | |
if (!is_user_logged_in() || get_user_meta(get_current_user_id(), 'show_nsfw', true) != 'yes') { | |
// Output CSS to blur images with the 'nsfw-product-image' class | |
echo ' | |
<style> | |
.nsfw-product-image img { | |
filter: blur(10px); // You can change the blur value here | |
} | |
</style> | |
'; | |
} | |
} | |
add_action('wp_head', 'add_custom_blur_css'); | |
// Add custom class to products tagged 'nsfw' | |
function add_blur_to_nsfw_product_images($classes, $product) { | |
// Check if the product has the 'nsfw' tag | |
if (has_term('nsfw', 'product_tag', $product->get_id())) { | |
$classes[] = 'nsfw-product-image'; // Add custom class to blur the image | |
} | |
return $classes; | |
} | |
add_filter('woocommerce_post_class', 'add_blur_to_nsfw_product_images', 10, 2); | |
// Add custom class to product images in shop and archive pages | |
function blur_nsfw_product_images($html, $post_id) { | |
// Check if the product has the 'nsfw' tag | |
if (has_term('nsfw', 'product_tag', $post_id)) { | |
// Add custom class to blur the image | |
$html = str_replace('<img', '<img class="nsfw-product-image"', $html); | |
} | |
return $html; | |
} | |
add_filter('woocommerce_get_product_thumbnail', 'blur_nsfw_product_images', 10, 2); | |
add_filter('post_thumbnail_html', 'blur_nsfw_product_images', 10, 2); | |
// Add custom class to single product images | |
function blur_nsfw_single_product_images($html, $post_id) { | |
// Check if the product has the 'nsfw' tag | |
if (has_term('nsfw', 'product_tag', $post_id)) { | |
// Add custom class to blur the image | |
$html = str_replace('<img', '<img class="nsfw-product-image"', $html); | |
} | |
return $html; | |
} | |
add_filter('woocommerce_single_product_image_html', 'blur_nsfw_single_product_images', 10, 2); | |
add_filter('woocommerce_single_product_image_thumbnail_html', 'blur_nsfw_single_product_images', 10, 2); | |
// Add setting toggle to My Account > Dashboard | |
function nsfw_blur_setting_form() { | |
$user_id = get_current_user_id(); | |
// Get the user's setting for showing NSFW images | |
$show_nsfw = get_user_meta($user_id, 'show_nsfw', true); | |
?> | |
<form method="post" action=""> | |
<?php wp_nonce_field('save_show_nsfw_setting', 'show_nsfw_nonce'); ?> | |
<h2>NSFW Image Setting</h2> <!-- You can change the title text here --> | |
<p> | |
<label> | |
<!-- Checkbox to show NSFW images, change the label text here --> | |
<input type="checkbox" name="show_nsfw" value="yes" <?php checked($show_nsfw, 'yes'); ?>> | |
Show NSFW images | |
</label> | |
</p> | |
<p> | |
<input type="submit" name="save_show_nsfw_setting" value="Save Setting"> | |
</p> | |
</form> | |
<?php | |
} | |
add_action('woocommerce_account_dashboard', 'nsfw_blur_setting_form'); | |
// Save the user's preference | |
function save_nsfw_blur_setting() { | |
// Check if the form has been submitted | |
if (isset($_POST['save_show_nsfw_setting'])) { | |
// Verify the nonce for security | |
if (!isset($_POST['show_nsfw_nonce']) || !wp_verify_nonce($_POST['show_nsfw_nonce'], 'save_show_nsfw_setting')) { | |
return; | |
} | |
$user_id = get_current_user_id(); | |
// Save the user's setting for showing NSFW images | |
$show_nsfw = isset($_POST['show_nsfw']) ? 'yes' : 'no'; | |
update_user_meta($user_id, 'show_nsfw', $show_nsfw); | |
} | |
} | |
add_action('init', 'save_nsfw_blur_setting'); | |
// Ensure the blur CSS class is added or removed based on the user's setting | |
function maybe_add_nsfw_class($html, $post_id) { | |
// Check if the user is not logged in or if logged in, does not have the 'show_nsfw' setting enabled | |
if (!is_user_logged_in() || get_user_meta(get_current_user_id(), 'show_nsfw', true) != 'yes') { | |
// Check if the product has the 'nsfw' tag | |
if (has_term('nsfw', 'product_tag', $post_id)) { | |
// Add custom class to blur the image | |
$html = str_replace('<img', '<img class="nsfw-product-image"', $html); | |
} | |
} | |
return $html; | |
} | |
add_filter('woocommerce_get_product_thumbnail', 'maybe_add_nsfw_class', 10, 2); | |
add_filter('post_thumbnail_html', 'maybe_add_nsfw_class', 10, 2); | |
add_filter('woocommerce_single_product_image_html', 'maybe_add_nsfw_class', 10, 2); | |
add_filter('woocommerce_single_product_image_thumbnail_html', 'maybe_add_nsfw_class', 10, 2); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
For Reddit thread: https://www.reddit.com/r/woocommerce/comments/1dg417p/pluginsnippet_suggession/
Caffeinate me: https://buymeacoffee.com/acephaliax