- Introduction
- Getting Started
- Theme/Plugin Update
- Theme Options
- Elementor Widget/WPBakery Shortcodes
- Address Block
- Banner
- Button
- Callout
- Category Box
- Clients Logo
- Countdown
- Counter
- Hotspot Image
- Static Block
- Image Slider
- Image Gallery
- Info Box
- Info Box 2
- Instagram (Shortcode)
- Kite Box
- List
- Menu List
- Multi Tab Product Listing
- Newsletter
- Opening Hours
- Portfolio
- Pricing Box
- Product Category Item
- Product Deal
- Product Deals
- Product Showcase
- Products Listing
- Progress Bar
- Recent Posts
- Search
- Section Title
- Single Product Slider
- Smart Image View
- Social Icons
- Team Members
- Timeline
- Testimonials
- Vertical Menu
- Video
- Videos
- WooCommerce
- Installing WooCommerce
- General Settings
- Products Settings
- Tax Settings
- Tax Rate Example
- Shipping Zones
- Flat Rate
- Free Shipping
- Local Pickup
- Shipping Options
- Shipping Classes
- Checkout Settings
- BACS
- Check Payments
- Cash On Delivery
- PayPal Standard
- Accounts Settings
- Emails Settings
- API Settings
- Product Categories, Tags, & Attributes
- Simple Product Overview
- Grouped Product Overview
- External/Affiliate Product Overview
- Variable Product Overview
- Downloadable Product Overview
- Coupons
- Widgets
- Shortcodes
- Managing Orders
- Refunding Orders
- Reporting
- System Status
- WooCommerce
- Widgtes
- Translation
- Extra
- Additional
- FAQs
- Changelog
- Source & Credits
4.13.12.Mobile Sticky Footer
In this section, you can control the display of sticky footer elements on mobile devices. This section contains the below fields.
- Mobile Sticky Footer: With this, you choose to show or hide the sticky footer on mobile devices.
- Show/hide Elements: In this field, you select which elements to show and in which order.
If you have a requirement to add a new element, you can do it by adding your custom code in the child theme. Here is the sample code, which you can use as a reference and can customize your code to add custom elements as per your requirements.
Add Custom Elements
// This line adds a filter hook to the 'ciyashop_mobile_sticky_footer_elements' filter. // The filter hook allows developers to modify the elements displayed in the mobile sticky footer. add_filter( 'ciyashop_mobile_sticky_footer_elements', 'ciyashop_child_mobile_sticky_footer_elements' ); // This function defines the callback function 'ciyashop_child_mobile_sticky_footer_elements'. function ciyashop_child_mobile_sticky_footer_elements( $elements ) { // First Element: // Element with icon class for icon. // Element without a custom callback. $elements['element_1'] = array( 'title' => esc_html__( 'Element 1', 'ciyashop-child' ), // Title of the element. 'icon_class' => 'fa-solid fa-link', // CSS class for the icon. ); // Second Element: // Element with image URL for icon. // Element with a custom callback. $elements['element_2'] = array( 'title' => esc_html__( 'Element 2', 'ciyashop-child' ), // Title of the element. 'icon_url' => 'https://s.w.org/style/images/about/WordPress-logotype-simplified.png', // URL for the icon image. 'callback' => 'ciyashop_child_sticky_footer_element_2_callback', // Custom callback function for rendering the element. ); return $elements; // Return the modified elements. } /** * Callback function for the first element. * Callback function for element without custom callback function defined. * * Callback function structure: 'ciyashop_mobile_sticky_footer_element_' + Element Key * For example: 'ciyashop_mobile_sticky_footer_element_' . 'element_1' */ function ciyashop_mobile_sticky_footer_element_element_1( $element, $element_data ) { $element_classes = $element_data['element_classes']; // Get the classes for the element. $element_classes = implode( ' ', array_filter( array_unique( $element_classes ) ) ); // Prepare classes for HTML output. ?> <div class="<?php echo esc_attr( $element_classes ); ?>"> <a href="https://example.com/?element=1" title="<?php echo esc_attr( $element_data['title'] ); ?>"> <?php echo wp_kses( $element_data['icon'], ciyashop_allowed_html( array( 'img', 'i' ) ) ); ?> </a> </div> <?php } /** * Callback function for the second element. * Callback function for element witht custom callback function defined. */ function ciyashop_child_sticky_footer_element_2_callback( $element, $element_data ) { $element_classes = $element_data['element_classes']; // Get the classes for the element. $element_classes = implode( ' ', array_filter( array_unique( $element_classes ) ) ); // Prepare classes for HTML output. ?> <div class="<?php echo esc_attr( $element_classes ); ?>"> <a href="https://example.com/?element=2" title="<?php echo esc_attr( $element_data['title'] ); ?>"> <?php echo wp_kses( $element_data['icon'], ciyashop_allowed_html( array( 'img', 'i' ) ) ); ?> </a> </div> <?php }