How To Add Custom Futured Product On WooCommerce Category Page With Elementor

// Shortcode to display featured products in the current category
function featured_category_products_shortcode($atts) {
    // Check if we're on a product category page
    if (is_product_category()) {
        $category = get_queried_object(); // Get the current category object

        // Query products with "Featured in Category" meta key
        $args = array(
            'post_type'      => 'product',
            'posts_per_page' => -1,
            'meta_key'       => '_featured_in_category',
            'meta_value'     => 'yes',
            'tax_query'      => array(
                array(
                    'taxonomy' => 'product_cat',
                    'field'    => 'slug',
                    'terms'    => $category->slug,
                ),
            ),
        );

        $query = new WP_Query($args);

        // Check if there are any featured products
        if ($query->have_posts()) {
            ob_start(); // Start output buffering
            echo '

'; // Close the container
            wp_reset_postdata(); // Reset the query
            return ob_get_clean(); // Return the buffered content
        } else {
            return ''; // No output if no products are found
        }
    } else {
        return ''; // No output if not on a category page
    }
}
add_shortcode('featured_category_products', 'featured_category_products_shortcode');

// Add "Featured in Category" checkbox to product edit page
function add_featured_in_category_field() {
    woocommerce_wp_checkbox(
        array(
            'id'          => '_featured_in_category',
            'label'       => __('Featured in Category', 'woocommerce'),
            'description' => __('Check this box to mark the product as featured in its category.', 'woocommerce'),
            'desc_tip'    => true,
        )
    );
}
add_action('woocommerce_product_options_general_product_data', 'add_featured_in_category_field');

// Save the "Featured in Category" value
function save_featured_in_category_field($post_id) {
    $is_featured = isset($_POST['_featured_in_category']) ? 'yes' : 'no';
    update_post_meta($post_id, '_featured_in_category', $is_featured);
}
add_action('woocommerce_process_product_meta', 'save_featured_in_category_field');

/* Grid container for featured products */
.featured-category-products {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* Default: 6 columns for PC */
    gap: 20px; /* Spacing between items */
    margin: 0;
    padding: 0;
}

/* Individual product styling */
.featured-category-products .product {
    border: 1px solid #ccc; /* Light gray border for products */
    border-radius: 10px; /* Rounded corners */
    padding: 15px; /* Padding for inner content */
    background-color: #fff; /* White background for product cards */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow effect */
    box-sizing: border-box;
}

/* Tablet view: 3 products per row */
@media screen and (max-width: 1024px) {
    .featured-category-products {
        grid-template-columns: repeat(3, 1fr); /* 3 columns for tablets */
    }
}

/* Mobile view: 2 products per row */
@media screen and (max-width: 768px) {
    .featured-category-products {
        grid-template-columns: repeat(2, 1fr); /* 2 columns for mobile */
    }
}

/* Add hover effect for products */
.featured-category-products .product:hover {
    transform: scale(1.05); 
	/* Slight zoom on hover */
    transition: transform 0.3s ease-in-out; /* Smooth transition */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */
}

.elementor-kit-48 h2 {
    font-size: 15px;
    letter-spacing: 1px;
    word-spacing: 1px;
	  display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
	  margin-bottom: 5px;
}

.woocommerce .star-rating {
    float: left;
	  margin-top: 3px;
    margin-bottom: 5px;
}

.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product p.price, .woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product span.price {
    color: black;
    font-size: 13px;
}

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button {
	  color: #ffffff;
    background-color: #e9026e;
	  padding: 10px 25px 10px 25px;
    margin-top: 10px;
}

.woocommerce span.onsale {
	background-color: #e9026e;
}