- Add this code to your child theme or snippet plugin in the video i am using the WPCodeBox snippet plugin Its paid. but there is also some other free options for code snippets plugins. Remember to set it as php snippet, if place inside snippet plugin.
<?php
// Register Elementor widget for Linnet Newest Products Carousel
add_action('elementor/widgets/widgets_registered', function($widgets_manager) {
if (!class_exists('Linnet_Newest_Products_Carousel_Widget')) {
class Linnet_Newest_Products_Carousel_Widget extends \Elementor\Widget_Base {
public function get_name() {
return 'linnet-newest-products-carousel';
}
public function get_title() {
return __('Linnet Newest Products Carousel', 'linnet');
}
public function get_icon() {
return 'eicon-slider-album';
}
public function get_categories() {
return ['general'];
}
protected function register_controls() {
$this->start_controls_section(
'linnet_settings_section',
[
'label' => __('Carousel Settings', 'linnet'),
'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
]
);
$this->add_control('linnet_products_count', [
'label' => __('Number of Products', 'linnet'),
'type' => \Elementor\Controls_Manager::NUMBER,
'default' => 10,
'min' => 1,
'max' => 50,
]);
$this->add_control('linnet_slides_desktop', [
'label' => __('Slides Per View (Desktop ≥1200px)', 'linnet'),
'type' => \Elementor\Controls_Manager::NUMBER,
'default' => 4,
'min' => 1,
'max' => 10,
]);
$this->add_control('linnet_slides_tablet', [
'label' => __('Slides Per View (Tablet ≥768px)', 'linnet'),
'type' => \Elementor\Controls_Manager::NUMBER,
'default' => 2,
'min' => 1,
'max' => 10,
]);
$this->add_control('linnet_slides_mobile', [
'label' => __('Slides Per View (Phone <768px)', 'linnet'),
'type' => \Elementor\Controls_Manager::NUMBER,
'default' => 1,
'min' => 1,
'max' => 10,
]);
$this->add_control('linnet_show_arrows', [
'label' => __('Show Arrows', 'linnet'),
'type' => \Elementor\Controls_Manager::SWITCHER,
'label_on' => __('Yes', 'linnet'),
'label_off' => __('No', 'linnet'),
'default' => 'yes',
]);
$this->add_control('linnet_show_dots', [
'label' => __('Show Pagination Dots', 'linnet'),
'type' => \Elementor\Controls_Manager::SWITCHER,
'label_on' => __('Yes', 'linnet'),
'label_off' => __('No', 'linnet'),
'default' => 'yes',
]);
$this->add_control('linnet_title_tag', [
'label' => __('Title HTML Tag', 'linnet'),
'type' => \Elementor\Controls_Manager::SELECT,
'default' => 'h4',
'options' => [
'h1' => 'H1', 'h2' => 'H2', 'h3' => 'H3', 'h4' => 'H4',
'h5' => 'H5', 'h6' => 'H6', 'p' => 'Paragraph (p)', 'span' => 'Span',
],
]);
$this->add_control('linnet_arrow_bg_color', [
'label' => __('Arrow Background Color', 'linnet'),
'type' => \Elementor\Controls_Manager::COLOR,
'default' => '#cccccc',
'selectors' => [
'{{WRAPPER}} .swiper-button-next, {{WRAPPER}} .swiper-button-prev' => 'background-color: {{VALUE}};',
],
]);
$this->add_control('linnet_arrow_border_radius', [
'label' => __('Arrow Border Radius', 'linnet'),
'type' => \Elementor\Controls_Manager::SLIDER,
'size_units' => ['px', '%'],
'range' => [ 'px' => [ 'min' => 0, 'max' => 50 ], '%' => [ 'min' => 0, 'max' => 100 ] ],
'default' => [ 'size' => 100, 'unit' => '%' ],
'selectors' => [
'{{WRAPPER}} .swiper-button-next, {{WRAPPER}} .swiper-button-prev' => 'border-radius: {{SIZE}}{{UNIT}};',
],
]);
$this->add_control('linnet_arrow_icon_color', [
'label' => __('Arrow Icon Color', 'linnet'),
'type' => \Elementor\Controls_Manager::COLOR,
'default' => '#000000',
'selectors' => [
'{{WRAPPER}} .swiper-button-next::after, {{WRAPPER}} .swiper-button-prev::after' => 'color: {{VALUE}};',
],
]);
$this->add_control('linnet_arrow_font_size', [
'label' => __('Arrow Icon Font Size', 'linnet'),
'type' => \Elementor\Controls_Manager::SLIDER,
'size_units' => ['px'],
'range' => [ 'px' => [ 'min' => 10, 'max' => 50 ] ],
'default' => [ 'size' => 25 ],
'selectors' => [
'{{WRAPPER}} .swiper-button-next::after, {{WRAPPER}} .swiper-button-prev::after' => 'font-size: {{SIZE}}{{UNIT}};',
],
]);
$this->add_control('linnet_arrow_size', [
'label' => __('Arrow Height & Width', 'linnet'),
'type' => \Elementor\Controls_Manager::SLIDER,
'size_units' => ['px'],
'range' => [ 'px' => [ 'min' => 20, 'max' => 100 ] ],
'default' => [ 'size' => 50 ],
'selectors' => [
'{{WRAPPER}} .swiper-button-next, {{WRAPPER}} .swiper-button-prev' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
],
]);
$this->add_control('linnet_dot_color', [
'label' => __('Pagination Dot Color', 'linnet'),
'type' => \Elementor\Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .swiper-pagination-bullet' => 'background-color: {{VALUE}};',
],
]);
$this->add_control('linnet_dot_active_color', [
'label' => __('Active Dot Color', 'linnet'),
'type' => \Elementor\Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .swiper-pagination-bullet-active' => 'background-color: {{VALUE}};',
],
]);
$this->add_control('linnet_custom_arrow_svg_next', [
'label' => __('Custom Arrow SVG (Next)', 'linnet'),
'type' => \Elementor\Controls_Manager::TEXTAREA,
'description' => __('Paste your SVG HTML here for the next/right arrow.'),
]);
$this->add_control('linnet_custom_arrow_svg_prev', [
'label' => __('Custom Arrow SVG (Prev)', 'linnet'),
'type' => \Elementor\Controls_Manager::TEXTAREA,
'description' => __('Paste your SVG HTML here for the prev/left arrow.'),
]);
$this->add_control('linnet_arrow_image_next', [
'label' => __('Upload Arrow Image (Next)', 'linnet'),
'type' => \Elementor\Controls_Manager::MEDIA,
'description' => __('Upload a PNG/SVG image for the next/right arrow.'),
]);
$this->add_control('linnet_arrow_image_prev', [
'label' => __('Upload Arrow Image (Prev)', 'linnet'),
'type' => \Elementor\Controls_Manager::MEDIA,
'description' => __('Upload a PNG/SVG image for the prev/left arrow.'),
]);
$this->end_controls_section();
}
protected function render() {
$settings = $this->get_settings_for_display();
$show_arrows = $settings['linnet_show_arrows'] === 'yes';
$show_dots = $settings['linnet_show_dots'] === 'yes';
$title_tag = $settings['linnet_title_tag'] ?: 'h4';
$product_count = $settings['linnet_products_count'] ?: 20;
$slides_desktop = $settings['linnet_slides_desktop'] ?: 4;
$slides_tablet = $settings['linnet_slides_tablet'] ?: 2;
$slides_mobile = $settings['linnet_slides_mobile'] ?: 1;
$arrow_next_content = $settings['linnet_custom_arrow_svg_next'] ?: ($settings['linnet_arrow_image_next']['url'] ? '<img src="' . esc_url($settings['linnet_arrow_image_next']['url']) . '" alt="Next" />' : '');
$arrow_prev_content = $settings['linnet_custom_arrow_svg_prev'] ?: ($settings['linnet_arrow_image_prev']['url'] ? '<img src="' . esc_url($settings['linnet_arrow_image_prev']['url']) . '" alt="Prev" />' : '');
$args = [
'post_type' => 'product',
'posts_per_page' => $product_count,
'post_status' => 'publish'
];
$query = new WP_Query($args);
if ($query->have_posts()) {
echo '<div class="swiper linnet-products-swiper" style="padding-bottom: 0px;">';
echo '<div class="swiper-wrapper">';
while ($query->have_posts()) {
$query->the_post();
global $product;
echo '<div class="swiper-slide">';
echo '<div class="linnet-carousel-item" style="padding: 10px; text-align: center;">';
echo '<a href="' . get_permalink() . '">';
echo woocommerce_get_product_thumbnail('medium');
echo '<' . esc_html($title_tag) . ' style="margin: 10px 0;">' . get_the_title() . '</' . esc_html($title_tag) . '>';
echo '</a>';
echo '<span class="price">' . $product->get_price_html() . '</span>';
echo '</div>';
echo '</div>';
}
echo '</div>'; // swiper-wrapper
if ($show_arrows) {
echo '<div class="swiper-button-next">' . ($arrow_next_content ?: '') . '</div>';
echo '<div class="swiper-button-prev">' . ($arrow_prev_content ?: '') . '</div>';
if ($arrow_next_content || $arrow_prev_content) {
echo '<style>.swiper-button-next::after, .swiper-button-prev::after { display: none !important; }</style>';
}
}
if ($show_dots) {
echo '<div class="swiper-pagination" style="position: relative;top: 10px;padding-bottom: 20px;"></div>';
}
echo '</div>'; // swiper
wp_reset_postdata();
} else {
echo '<p>No products found.</p>';
}
echo "<script>
document.addEventListener('DOMContentLoaded', function() {
new Swiper('.linnet-products-swiper', {
slidesPerView: " . $slides_desktop . ",
spaceBetween: 20,
navigation: " . ($show_arrows ? "{ nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }" : "false") . ",
pagination: " . ($show_dots ? "{ el: '.swiper-pagination', clickable: true }" : "false") . ",
breakpoints: {
1200: { slidesPerView: " . $slides_desktop . " },
768: { slidesPerView: " . $slides_tablet . " },
0: { slidesPerView: " . $slides_mobile . " }
},
loop: true,
grabCursor: true
});
});
</script>";
}
protected function content_template() {}
}
}
$widgets_manager->register(new \Linnet_Newest_Products_Carousel_Widget());
});
add_action('wp_enqueue_scripts', function() {
wp_enqueue_style('swiper', 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css', [], '11.0.0');
wp_enqueue_script('swiper', 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js', [], '11.0.0', true);
});
2. Go to the page your want to add the Latest Product Carousel Elementor and click edit with Elementor.
3. Then search for Linnet Newest Products Carousel and add it to the page.
4. I have added some things that you can change in the module.
-Number of products (How many products load in the slider, remember higher number increase load time)
-Slider per view (How many products shows in each slide, there sis for desktop tablet and phone)
-Show arrows.
-Show pagination dots.
-Title html tag (Choose what heading type or text type you want the heading as)
-Arrow background color.
-Arrow border radius.
-Arrow icon color.
-Arrow height & width (Size of arrow)
-Pagination dot color.
-Pagination active dot color.
-Option for custom arrow icon.
5. When you have set the settings you want then click publish.
