<style>
model-viewer{
    width:100%;
    height: 100vh;
}
@media (max-width: 1024px) {
model-viewer{
    height:600px;
}
}
@media (max-width: 767px) {
model-viewer{
    height:350px;
}
}
</style>

<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.1.3/webcomponents-loader.js"></script> 

<model-viewer
    src="ADD_YOUR_GLTF_FILE"
    shadow-intensity="1"
    disable-zoom
    camera-controls
    auto-rotate
>
</model-viewer>

<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>

How To %[https://www.youtube.com/watch?v=EmiiBvFgnys]

Tutorial Source

Elementor Animated Circle Background Effect

CSS code snippet on the Container:

selector{
    --radius: 300px;
    --heading-blur: 10px;
    --text-delay: 1.2s;
}
selector{
    --x: 50%;
    --y: 50%;
}
selector .focus-overlay{
    clip-path: circle(0 at var(--x) var(--y));
    transition: all 0.2s linear;
}
selector.hover .focus-overlay{
    clip-path: circle(var(--radius) at var(--x) var(--y));
}


/* Heading Animtion */

selector .elementor-widget-heading{
    filter: blur(var(--heading-blur));
    transition: all 2s ease-in-out;
    opacity: 0.75;
}
selector.animated .elementor-widget-heading{
    filter: blur(0);
    opacity: 1;
}


/* Text and Button Animtion */

selector .elementor-widget-text-editor,
selector .elementor-widget-button{
    transform: translateY(30px);
    transition: all 1s ease-in-out var(--text-delay);
    opacity: 0;
    animation: none;
}
selector.animated .elementor-widget-text-editor,
selector.animated .elementor-widget-button{
    transform: translateY(0);
    opacity: 1;
}

@media (max-width: 767px){
selector > *{
    clip-path: none !important;
}
}

JavaScript code snippet:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var $ = jQuery
$(document).ready(function(){

$(".focus-section").on('mousemove', function(e){
   var parentOffset = $(this).offset(),
   x = e.pageX - parentOffset.left,
   y = e.pageY - parentOffset.top

   $(this).addClass('hover')

   $('.focus-section').css({
       '--x': x + 'px',
       '--y': y + 'px',

   })
})

$(".focus-section").on('mouseleave', function(){
  $(this).removeClass('hover')
})

})
</script>

Tutorial Source

Code Snippet: PHP

<?php
// Activate WordPress Maintenance Mode
function ess_wp_maintenance_mode() {
    $posts = get_posts(array(
        'posts_per_page' => -1,
    ));

    if (!current_user_can('edit_themes') || !is_user_logged_in()) {
        wp_die('<h1>Under Maintenance</h1><br />The website is under planned maintenance. Check back later.');
    } else {
        $alert_bar_css = "
background-color: #ff0000;
color: #FFFFFF;
display: block;
line-height: 45px;
height: 50px;
position: relative;
text-align: center;
text-decoration: none;
top: 0px;
width: 100%;
z-index: 100;";

        $msg = "Maintenance Mode is Enabled!";

        if (is_admin()) {
            echo '<div class="notice notice-info is-dismissible"><p style="background-color: #ff0000; color: #FFFFFF;">' . $msg . '</p></div>';
        } else {
            echo '<div style="' . $alert_bar_css .'">' . $msg . '</div>';
        }
    }
}
if (is_admin()) {
    add_action('admin_notices', 'ess_wp_maintenance_mode');
} else{
    add_action('get_header', 'ess_wp_maintenance_mode');
}

Code Snippet: PHP

var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("stickyheaders").style.top = "-1000px";
  } else {
    document.getElementById("stickyheaders").style.top = 'var(--wp-admin--admin-bar--height,0)';
  }
  prevScrollpos = currentScrollPos;
}

Here are some WooCommerce snippets and hacks I've used on most of my sites So, I'd like to share them with everyone. You can either paste them into your theme's functions.php file or better still, use the Code Snippets plugin if you want to keep your changes when switching themes.

Change default WordPress Text

function divi_engine_wc_translations($translated){
     $text = array(
        'Your order' => 'Order', // changes all Your order text to be Order
    'Billing Details' => 'Your Details', // changes all Billing Details text to be Your Details
     'Product'    => 'Book', // changes all product text to be book
     'Addresses'    => 'Billing Information', // changes all Addresses text to be Billing Information (in account)
     );

     $translated = str_ireplace(  array_keys($text),  $text,  $translated );
     return $translated;
 }
 add_filter( 'gettext', 'divi_engine_wc_translations', 20 );

Rename a product tab

add_filter( 'woocommerce_product_tabs', 'woo_rename_tab', 98);
function woo_rename_tab($tabs) {

 $tabs['description']['title'] = 'More info';

 return $tabs;
}

Replace “Out of stock” by “sold”

add_filter('woocommerce_get_availability', 'availability_filter_func');

function availability_filter_func($availability)
{
    $availability['availability'] = str_ireplace('Out of stock', 'Sold', $availability['availability']);
    return $availability;
}

Loading WooCommerce CSS and JavaScript Files on Shop Pages Only

<?php

if (!function_exists( 'evolution_manage_woocommerce_styles' ) ) :
/**
* Optimize WooCommerce Scripts
* Removes WooCommerce styles and scripts from non WooCommerce pages.
*/  
function evolution_manage_woocommerce_styles() {

    //first check that woo exists to prevent fatal errors
    if ( function_exists( 'is_woocommerce' ) ) {

        //dequeue scripts and styles
        if ( ! is_woocommerce() && ! is_cart() && ! is_checkout() && ! is_account_page() ) {          
            wp_dequeue_style( 'woocommerce-layout' );
            wp_dequeue_style( 'woocommerce-smallscreen' );
            wp_dequeue_style( 'woocommerce-general' );
            wp_dequeue_style( 'evolution-woostyles' );
            wp_dequeue_script( 'wc_price_slider' );
            wp_dequeue_script( 'wc-single-product' );
            wp_dequeue_script( 'wc-add-to-cart' );
            wp_dequeue_script( 'wc-cart-fragments' );
            wp_dequeue_script( 'wc-checkout' );
            wp_dequeue_script( 'wc-add-to-cart-variation' );
            wp_dequeue_script( 'wc-single-product' );
            wp_dequeue_script( 'wc-cart' );
            wp_dequeue_script( 'wc-chosen' );
            wp_dequeue_script( 'woocommerce' );
            wp_dequeue_script( 'prettyPhoto' );
            wp_dequeue_script( 'prettyPhoto-init' );
            wp_dequeue_script( 'jquery-blockui' );
            wp_dequeue_script( 'jquery-placeholder' );
            wp_dequeue_script( 'fancybox' );
            wp_dequeue_script( 'jqueryui' );
        }
    }
}
add_action( 'wp_enqueue_scripts', 'evolution_manage_woocommerce_styles', 99 );
endif;

Quickly translate any string

add_filter('gettext',  'translate_text');
add_filter('ngettext',  'translate_text');

function translate_text($translated) {
     $translated = str_ireplace('Choose and option',  'Select',  $translated);
     return $translated;
}

Set the Minimum Quantity for WooCommerce Products
/**
* Code snippet: Set the Minimum, Maximum, and Start Value to Cart Quantity
*/

add_filter( 'woocommerce_quantity_input_args', 'njengah_woocommerce_quantity_changes', 10, 2 );

   function njengah_woocommerce_quantity_changes( $args, $product ) {

      if ( ! is_cart() ) {

        $args['input_value'] = 5; // Start from this value (default = 1)

      $args['max_value'] = 1000; // Max quantity (default = -1)

      $args['min_value'] = 1; // Min quantity (default = 0)

      $args['step'] = 1; // Increment/decrement by this value (default = 1)

     } else {

        // Cart's "min_value" is already 0 and we don't need "input_value"

      $args['max_value'] = 1000; // Max quantity (default = -1)

      $args['step'] = 1; // Increment/decrement by this value (default = 0)

      // COMMENT OUT FOLLOWING IF STEP < MIN_VALUE

      // $args['min_value'] = 4; // Min quantity (default = 0)

     }

      return $args;

   }

Redirect to checkout page after add to cart

function add_to_cart_checkout_redirect() {
  wp_safe_redirect( get_permalink( get_option( 'woocommerce_checkout_page_id' ) ) );

die();

}

add_action( ‘add_to_cart_redirect’, ‘add_to_cart_checkout_redirect’, 16 );
function add_to_cart_checkout_redirect() {
    global $woocommerce;
    $checkout_url = $woocommerce->cart->get_checkout_url();
    return $checkout_url;
}

Change add to cart button text
//Single Page
add_filter( 'woocommerce_product_single_add_to_cart_text', 'woo_custom_cart_button_text' ); // 2.1 +
function woo_custom_cart_button_text() {
return __( 'My Button Text', 'woocommerce' );

}
//On Archive Pages
add_filter( 'woocommerce_product_add_to_cart_text', 'woo_archive_custom_cart_button_text' ); // 2.1 +
function woo_archive_custom_cart_button_text() {
return __( 'My Button Text', 'woocommerce' );
}

Redirect add to cart button to checkout page

add_filter ('add_to_cart_redirect', 'redirect_to_checkout');

function redirect_to_checkout() {
    global $woocommerce;
    $checkout_url = $woocommerce->cart->get_checkout_url();
    return $checkout_url;
}

Add email recipient when order completed

function woo_extra_email_recipient($recipient, $object) {
    $recipient = $recipient . ', your@email.com';
    return $recipient;
}
add_filter( 'woocommerce_email_recipient_customer_completed_order', 'woo_extra_email_recipient', 10, 2);