{"id":1677,"date":"2024-12-13T04:44:08","date_gmt":"2024-12-13T04:44:08","guid":{"rendered":"https:\/\/synctrack.io\/?post_type=knowledgebase&p=1677"},"modified":"2024-12-26T07:34:05","modified_gmt":"2024-12-26T07:34:05","slug":"customize-appearance-of-edd-eta-banner-on-your-store","status":"publish","type":"knowledgebase","link":"https:\/\/synctrack.io\/knowledge-base\/edd\/estimate-rule\/customize-appearance-of-edd-eta-banner-on-your-store\/","title":{"rendered":"Customize banner appearance"},"content":{"rendered":"

This guide explains how to customize the Appearance<\/b> of the Estimated Time of Arrival (ETA) widget for your store.<\/p>\n

\u00a0<\/h2>\n

Display mode<\/h2>\n
    \n
  • Card<\/b>: Displays all available rules, each shown as an individual card.<\/li>\n
  • Droplist<\/b>: Allows you to select a rule from a dropdown menu.<\/li>\n<\/ul>\n

    \u00a0<\/h2>\n

    Layout graphic<\/h2>\n

    Configure how delivery information is displayed visually to customers.<\/p>\n

    Rule order<\/h3>\n

    You can customize the rule order, which will be reflected in the storefront, preview, and rule list. This lets you prioritize rules based on their name or preparation\/delivery days, allowing you to decide which rule appears first or later. Available sorting methods:<\/p>\n

      \n
    • Time created (newest, oldest)<\/li>\n
    • Rule name (first letter) (A-Z, Z-A)<\/li>\n
    • Min\/max preparation\/delivery (ascending, descending)<\/li>\n<\/ul>\n

      Show banner header<\/h3>\n
        \n
      • Purpose<\/b>: Display a header above the ETA information when in Card display mode.<\/li>\n
      • How to Use<\/b>: Toggle this option to show or hide the banner header.<\/li>\n<\/ul>\n

        <\/p>\n

        ETA information<\/h3>\n

        The ETA information section features several details, including the delivery method name, estimated text, message, country delivery label, custom text, extra information text, and a countdown message.<\/p>\n

        Timeline graphic<\/h3>\n

        Timeline graphics serve as a visual aid within the ETA banner. Creating a graphic helps customers better understand when their product will arrive and makes the presentation more appealing, potentially boosting conversion rates.<\/p>\n

        Stage icons, titles, tooltips<\/strong><\/div>\n

        You can display from 1 to all 3 stages on the timeline.<\/p>\n

          \n
        • Stage 1 – Order received: The date when the order is placed. Usually, it is today, but it can be another day if the order is placed after the cut-off time.<\/li>\n
        • Stage 2 – Preparation The range of minimum and maximum preparation date<\/li>\n
        • Stage 3 – Delivery: The range of minimum and maximum delivery date<\/li>\n<\/ul>\n

          You can display from 1 to all 3 stages and customize icons, titles, and tooltips for each stage to align with your sales and logistics processes.<\/p>\n

          \u00a0<\/div>\n
          Date range<\/strong><\/div>\n

          You can select the direction (horizontal or vertical) and icon (dash or arrow) for the date range.<\/p>\n

          \u00a0<\/div>\n

          Visual appearance editor<\/h2>\n

          <\/p>\n

          Personalize the colors, text, and border styles for the ETA widget.<\/p>\n

          \n
            \n
          • Theme templates: <\/strong><\/strong>Pre-created visual layouts for quick selection.<\/li>\n
          • Text color: <\/strong>General color for texts on the ETA banner. Note that if you adjust the text visual by text editors when setting up the rule, the text will follow the text editor one while unaffected text follows the general color in the Appearance setting.<\/li>\n
          • Timeline icon color: <\/strong>Color for icons displayed on the timeline graphic<\/li>\n
          • Text size: <\/strong>The size is set for all texts by default unless the text editor sets a specific size.<\/li>\n
          • Background color:<\/strong> This will change the background of the ETA banner and the timeline graphics. You can set color or transparent.<\/li>\n
          • Border color: <\/strong>will affect the border of the banner and the border of the timeline graphics. You can set color or transparent.<\/li>\n<\/ul>\n<\/div>\n

            \u00a0<\/h2>\n

            Date appearance<\/h2>\n

            <\/p>\n

            Customize how dates are displayed in the ETA banner.<\/p>\n

              \n
            • Date format<\/strong>: This allows you to select how the date is displayed. You can choose the arrangement of the day, month, and year.<\/li>\n
            • Date display mode<\/strong>:\n
                \n
              • Exact Date<\/b>: Displays the date in the standard format, including the day\/month\/year.<\/li>\n
              • Relative Date<\/b>: Dates matching today\u2019s or tomorrow\u2019s calendar date will be displayed as \u201ctoday\u201d or \u201ctomorrow.\u201d<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n

                \u00a0<\/h2>\n

                Countdown settings<\/h2>\n

                Add a countdown timer to create urgency and inform customers about deadlines<\/p>\n

                \n

                Countdown Timer Format<\/b><\/p>\n

                  \n
                • <\/b>Customization<\/b>: Choose to display days, hours, minutes, and seconds according to your preference.<\/li>\n
                • How to Use<\/b>: Include the {TimeCountDown}<\/span> variable in the message text to represent the countdown timer.<\/li>\n<\/ul>\n

                  Show Timer After Cut-off Time & Countdown Option<\/b><\/p>\n

                    \n
                  • <\/b>Options<\/b>:\n
                      \n
                    • Show Timer After Cut-off Time<\/b>: Toggle to display the countdown after the cut-off time.<\/li>\n
                    • Countdown Calculation Methods<\/b>:\n
                        \n
                      • Count to the Next Cut-off Time<\/b>: Includes non-working days and holidays.<\/li>\n
                      • Count to 23:59 Every Day<\/b>: Resets daily.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n

                        \u00a0<\/p>\n<\/div>\n

                        Zipcode checker<\/h2>\n

                        <\/p>\n

                        Validate customers\u2019 postal codes and display the ETA accordingly.<\/p>\n

                          \n
                        • Checker’s title<\/strong>: The title at the top of the section, typically instructs customers on what action to take.<\/li>\n
                        • Postal code text<\/strong>: The placeholder or instructional text inside the text box.<\/li>\n
                        • Check text<\/strong>: The wording on the button used for validation.<\/li>\n
                        • Check text color<\/strong>: The color of the text on the validation button.<\/li>\n
                        • Button background color<\/strong>: The background color of the validation button.<\/li>\n
                        • Valid\/Invalid postal code: <\/strong>Text displayed when a postal code is available\/not available for delivery<\/li>\n<\/ul>\n

                          \u00a0<\/h2>\n

                          Custom CSS<\/b><\/b><\/h2>\n
                            \n
                          • Purpose<\/b>: Apply advanced styling to match the widget\u2019s appearance to your store\u2019s theme.<\/li>\n
                          • How to Use<\/b>: Enter custom CSS code in the provided field to override default styling.<\/li>\n<\/ul>\n\n\n

                            <\/p>\n","protected":false},"excerpt":{"rendered":"

                            This guide explains how to customize the Appearance of the Estimated Time of Arrival (ETA) widget for your store. \u00a0 Display mode Card: Displays all available rules, each shown as an individual card. Droplist: Allows you to select a rule […]<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"closed","ping_status":"open","template":"","knowledgebase_cat":[266],"class_list":["post-1677","knowledgebase","type-knowledgebase","status-publish","hentry","knowledgebase_cat-estimate-rule"],"acf":[],"_links":{"self":[{"href":"https:\/\/synctrack.io\/wp-json\/wp\/v2\/knowledgebase\/1677","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/synctrack.io\/wp-json\/wp\/v2\/knowledgebase"}],"about":[{"href":"https:\/\/synctrack.io\/wp-json\/wp\/v2\/types\/knowledgebase"}],"author":[{"embeddable":true,"href":"https:\/\/synctrack.io\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/synctrack.io\/wp-json\/wp\/v2\/comments?post=1677"}],"version-history":[{"count":9,"href":"https:\/\/synctrack.io\/wp-json\/wp\/v2\/knowledgebase\/1677\/revisions"}],"predecessor-version":[{"id":1914,"href":"https:\/\/synctrack.io\/wp-json\/wp\/v2\/knowledgebase\/1677\/revisions\/1914"}],"wp:attachment":[{"href":"https:\/\/synctrack.io\/wp-json\/wp\/v2\/media?parent=1677"}],"wp:term":[{"taxonomy":"knowledgebase_cat","embeddable":true,"href":"https:\/\/synctrack.io\/wp-json\/wp\/v2\/knowledgebase_cat?post=1677"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}