CSS Code Snippets Uncategorized

Fixing the Woocommerce Double Tap Image Slider Issue

When utilizing the TP Product Image Flipper for WooCommerce plugin, there is a tendency for WooCommerce products with a second image to not open with a single click. Instead, they require two clicks to access the product, which presents an issue. To resolve the issue, simply insert the provided code into the CSS file. @media […]

JS Code Snippets/Functions

Retrieve the minimum price excluding 0 and display it, rather than showing a range

// Min Price in Shop Page add_filter( ‘woocommerce_get_price_html’, ‘custom_change_variable_price_display’, 10, 2 ); function custom_change_variable_price_display( $price, $product_obj ) { global $product; if ( ‘variable’ !== $product_obj->get_type() || ‘product_variation’ === $product_obj->post_type ) { return $price; } else { $variations = $product_obj->get_available_variations(); $prices = array( $product_obj->get_variation_price( ‘min’, true ), $product_obj->get_variation_price( ‘max’, true ) ); // Translators: %s is […]

Reusable Custom Blocks

Custom Query Loop Block

<?php /** ** Block Name: Query Loop Block **/ $posttype = $attributes[‘post-type’]; $category = $attributes[‘category’]; $tags = $attributes[‘tags’]; ?> <style> .display_querybox { display: flex !important; } .wp-block-lazyblock-query-loop-block{ position:relative; } .query_all_box{ display: flex; align-items: center; margin-bottom: 60px; position:relative; } .as-img{ width: 450px; height: 263px; margin-bottom: -10px; object-fit: cover; } .query-content{ padding-left: 60px; } .query-content h2{ margin:0; […]

Reusable Custom Blocks

Custom Post Type Gallery Slider

Add ACF field Add Lazyblock <style> .slider{ display: flex; overflow:hidden; } .slider .slick-track { display: flex; gap: 13px; } .slider .slick-track .slick-slide.slick-current{ margin-left:-13px; } .slider .slick-track .slick-slide.slick-active:last-child{ margin-right:-13px; } .slider .slick-slide{ height: 175px !important; width: 200px; background:var(–wp–preset–color–tertiary) !important; align-items: center; display: flex; justify-content: center; } .slider .slide img{ height:100%; width:100%; object-fit:cover; } @media all and […]

Reusable Custom Blocks

Embed video on a post and display it on a single post and a page.

Display on a Single Post <?php /* Video Embed */ ?> <div class=”embed-container”> <?php the_field(‘video’); ?> </div> Display on a Page <?php /** ** Custom Post Video **/ ?> <style> .wp-block-lazyblock-custom-post-video{ display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; position:relative; } .team_all_box{ background: #F5F5FF; border-radius:5px; } /* PAGINATION */ .pagination{ position:absolute; bottom:-3em; text-align:center; width:100%; } […]