How To Edit Event Archive Elementor Free

1. Click on ACF.
2. Then on post types.
3. Then edit the event post type.
4. Enable advanced settings.
5. Click on URL’s and make sure the Archive option is enabled.
6. Click save settings.
7. Then you need to put this custom code inside a snippet plugin. I am using WPCodeBox, which is a paid plugin. You can also choose a snippet plugin that is free, or create a child theme and put it inside the functions file. Make sure that if you choose a snippet plugin, you put it in as a PHP snippet.

<?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);
});

8. Now there is an new menu point called Linnet Templates in the left side admin menu click on that.
9. Then click Add New Linnet Template.
10. Give it a title click publish and then click edit with Elementor.
11. Then you can add what you want there, that you want to show on the archive page. In the video i am adding an container and then just a heading with Events, then click publish.
12. Then go back to the backend.
13. Then click on Linnets Templates -> Archive.
14. Here you can see the archive types you have on the website, locate Events and then from the dropdown select the template you just created and click save changes.
15. Now if you go to the /event/ url if you have not changed it, it will show your template.