{"id":8661,"date":"2025-09-29T20:03:18","date_gmt":"2025-09-29T13:03:18","guid":{"rendered":"https:\/\/danielepais.com\/journal\/?p=8661"},"modified":"2025-09-29T20:08:39","modified_gmt":"2025-09-29T13:08:39","slug":"how-to-create-a-floating-popup-menu-for-woocommerce-categories","status":"publish","type":"post","link":"https:\/\/danielepais.com\/journal\/how-to-create-a-floating-popup-menu-for-woocommerce-categories\/","title":{"rendered":"How to Create a Floating Popup Menu for WooCommerce Categories"},"content":{"rendered":"<p>If you run an online store with WooCommerce, making navigation easy for your customers is essential. One simple way to do this is by adding a <strong>floating button with a popup menu for WooCommerce<\/strong>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/ywAAAAAAQABAAACAUwAOw==\" fifu-lazy=\"1\" fifu-data-sizes=\"auto\" fifu-data-srcset=\"https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNS8wOS9DcmVhdGUtYS1GbG9hdGluZy1Qb3B1cC1NZW51LWZvci1Xb29Db21tZXJjZS5qcGc\/853772819266\/create-a-floating-popup-menu-for-woocommerce.webp?p=8661&w=75&h=0&c=0 75w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNS8wOS9DcmVhdGUtYS1GbG9hdGluZy1Qb3B1cC1NZW51LWZvci1Xb29Db21tZXJjZS5qcGc\/c6f853a2864a\/create-a-floating-popup-menu-for-woocommerce.webp?p=8661&w=100&h=0&c=0 100w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNS8wOS9DcmVhdGUtYS1GbG9hdGluZy1Qb3B1cC1NZW51LWZvci1Xb29Db21tZXJjZS5qcGc\/2990ee82962e\/create-a-floating-popup-menu-for-woocommerce.webp?p=8661&w=150&h=0&c=0 150w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNS8wOS9DcmVhdGUtYS1GbG9hdGluZy1Qb3B1cC1NZW51LWZvci1Xb29Db21tZXJjZS5qcGc\/9ca8a1a01876\/create-a-floating-popup-menu-for-woocommerce.webp?p=8661&w=240&h=0&c=0 240w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNS8wOS9DcmVhdGUtYS1GbG9hdGluZy1Qb3B1cC1NZW51LWZvci1Xb29Db21tZXJjZS5qcGc\/dd457806af9b\/create-a-floating-popup-menu-for-woocommerce.webp?p=8661&w=320&h=0&c=0 320w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNS8wOS9DcmVhdGUtYS1GbG9hdGluZy1Qb3B1cC1NZW51LWZvci1Xb29Db21tZXJjZS5qcGc\/c881c6e39966\/create-a-floating-popup-menu-for-woocommerce.webp?p=8661&w=500&h=0&c=0 500w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNS8wOS9DcmVhdGUtYS1GbG9hdGluZy1Qb3B1cC1NZW51LWZvci1Xb29Db21tZXJjZS5qcGc\/09992f659d39\/create-a-floating-popup-menu-for-woocommerce.webp?p=8661&w=640&h=0&c=0 640w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNS8wOS9DcmVhdGUtYS1GbG9hdGluZy1Qb3B1cC1NZW51LWZvci1Xb29Db21tZXJjZS5qcGc\/58ab75e35b3d\/create-a-floating-popup-menu-for-woocommerce.webp?p=8661&w=800&h=0&c=0 800w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNS8wOS9DcmVhdGUtYS1GbG9hdGluZy1Qb3B1cC1NZW51LWZvci1Xb29Db21tZXJjZS5qcGc\/4af412b58b55\/create-a-floating-popup-menu-for-woocommerce.webp?p=8661&w=1024&h=0&c=0 1024w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNS8wOS9DcmVhdGUtYS1GbG9hdGluZy1Qb3B1cC1NZW51LWZvci1Xb29Db21tZXJjZS5qcGc\/9caffd65d117\/create-a-floating-popup-menu-for-woocommerce.webp?p=8661&w=1280&h=0&c=0 1280w, https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNS8wOS9DcmVhdGUtYS1GbG9hdGluZy1Qb3B1cC1NZW51LWZvci1Xb29Db21tZXJjZS5qcGc\/110890cf9a63\/create-a-floating-popup-menu-for-woocommerce.webp?p=8661&w=1600&h=0&c=0 1600w\" class=\"alignnone size-full wp-image-8671\" title=\"Create a Floating Popup Menu for WooCommerce\" fifu-data-src=\"https:\/\/wp.fifu.app\/danielepais.com\/aHR0cHM6Ly9kYW5pZWxlcGFpcy5jb20vam91cm5hbC93cC1jb250ZW50L3VwbG9hZHMvMjAyNS8wOS9DcmVhdGUtYS1GbG9hdGluZy1Qb3B1cC1NZW51LWZvci1Xb29Db21tZXJjZS5qcGc\/60f4eea66950\/create-a-floating-popup-menu-for-woocommerce.webp?p=8661\" alt=\"Create a Floating Popup Menu for WooCommerce\" width=\"850\" height=\"400\" \/><\/p>\n<p>A button\u00a0that opens a popup menu with all your product categories and subcategories. This guide shows you <a href=\"https:\/\/danielepais.com\/journal\/ip-cameras-how-to\/\">how to<\/a> build it step by step, using a lightweight custom plugin.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a683568927f5\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #18bc9c;color:#18bc9c\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #18bc9c;color:#18bc9c\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a683568927f5\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/danielepais.com\/journal\/how-to-create-a-floating-popup-menu-for-woocommerce-categories\/#WC_Floating_Categories_Popup\" >WC Floating Categories Popup<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/danielepais.com\/journal\/how-to-create-a-floating-popup-menu-for-woocommerce-categories\/#Features\" >Features<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/danielepais.com\/journal\/how-to-create-a-floating-popup-menu-for-woocommerce-categories\/#1_Create_the_plugin_folder_and_file\" >1. Create the plugin folder and file<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/danielepais.com\/journal\/how-to-create-a-floating-popup-menu-for-woocommerce-categories\/#2_Add_the_plugin_code\" >2. Add the plugin code<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/danielepais.com\/journal\/how-to-create-a-floating-popup-menu-for-woocommerce-categories\/#3_Add_the_styling\" >3. Add the styling<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/danielepais.com\/journal\/how-to-create-a-floating-popup-menu-for-woocommerce-categories\/#4_Add_the_JavaScript\" >4. Add the JavaScript<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/danielepais.com\/journal\/how-to-create-a-floating-popup-menu-for-woocommerce-categories\/#5_Activate_the_plugin\" >5. Activate the plugin<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/danielepais.com\/journal\/how-to-create-a-floating-popup-menu-for-woocommerce-categories\/#6_Usage\" >6.\u00a0Usage<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/danielepais.com\/journal\/how-to-create-a-floating-popup-menu-for-woocommerce-categories\/#7_Tips_for_customization\" >7. Tips for customization<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"WC_Floating_Categories_Popup\"><\/span>WC Floating Categories Popup<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The\u00a0<strong>WC Floating Categories Popup<\/strong>\u00a0is a lightweight <a href=\"https:\/\/danielepais.com\/journal\/how-to-add-products-to-your-shopify-account-and-have-it-synchronized-in-wordpress\/\">WordPress<\/a> plugin that adds a floating button to your WooCommerce store. When clicked, it opens a responsive popup displaying your full product category tree with expandable subcategories. This makes it easy for customers to browse and find products without digging through menus.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Features\"><\/span>Features<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li>\n<p>\ud83d\ude80\u00a0<strong>Lightweight &amp; Fast<\/strong>\u00a0\u2013 no heavy scripts or slowdowns.<\/p>\n<\/li>\n<li>\n<p>\ud83d\udcf1\u00a0<strong>Responsive <a href=\"https:\/\/danielepais.com\/journal\/design-a-logo-with-a-vision-part-4\/\">Design<\/a><\/strong>\u00a0\u2013 works perfectly on desktop, tablet, and mobile.<\/p>\n<\/li>\n<li>\n<p>\u267f\u00a0<strong>Accessible<\/strong>\u00a0\u2013 supports keyboard navigation, ARIA labels, and ESC key to close.<\/p>\n<\/li>\n<li>\n<p>\ud83c\udfa8\u00a0<strong>Customizable<\/strong>\u00a0\u2013 easily change button color, label, and position with <a href=\"https:\/\/danielepais.com\/journal\/how-to-modify-a-drupal-block-via-its-css\/\">CSS<\/a>.<\/p>\n<\/li>\n<li>\n<p>\ud83d\udd17\u00a0<strong>WooCommerce Integration<\/strong>\u00a0\u2013 automatically pulls product categories and links to archive pages.<\/p>\n<\/li>\n<li>\n<p>\u2705\u00a0<strong>Multiple Closing Options<\/strong>\u00a0\u2013 close with ESC, overlay click, or the built-in close button.<\/p>\n<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"1_Create_the_plugin_folder_and_file\"><\/span>1. Create the plugin folder and file<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ol>\n<li>Go to your WordPress installation via FTP or File Manager.<\/li>\n<li>Navigate to:\u00a0<strong>wp-content\/plugins\/<\/strong><\/li>\n<li>Create a new folder named:\u00a0<strong>wc-floating-categories<\/strong><\/li>\n<li>Inside this folder, create a file named:\u00a0<strong>wc-floating-categories.php<\/strong><\/li>\n<\/ol>\n<h2><span class=\"ez-toc-section\" id=\"2_Add_the_plugin_code\"><\/span>2. Add the plugin code<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Open the <code>wc-floating-categories.php<\/code> file and paste the following starter code:<\/p>\n<blockquote>\n<pre><code>\r\n &lt;?php\r\n\/**\r\n\u00a0* Plugin Name: WC Floating Categories Popup\r\n\u00a0* Description: Adds a floating button that opens a popup with your WooCommerce product categories.\r\n\u00a0* Version: 1.0\r\n\u00a0* Author: Your Name\r\n\u00a0*\/\r\nif (!defined('ABSPATH')) { exit; }\r\n\/\/ Enqueue styles and scripts\r\nadd_action('wp_enqueue_scripts', function() {\r\n wp_enqueue_style('wc-floating-categories-style', plugin_dir_url(__FILE__) . 'style.css');\r\n wp_enqueue_script('wc-floating-categories-script', plugin_dir_url(__FILE__) . 'script.js', ['jquery'], null, true);\r\n});\r\n\/\/ Display floating button + popup\r\nadd_action('wp_footer', function() {\r\n ?&gt;\r\n &lt;button id=\"wc-floating-btn\" aria-haspopup=\"true\" aria-controls=\"wc-cat-popup\"&gt;Categories&lt;\/button&gt;\r\n &lt;div id=\"wc-cat-popup\" class=\"hidden\" role=\"dialog\" aria-modal=\"true\"&gt;\r\n &lt;div class=\"wc-cat-popup-content\"&gt;\r\n &lt;button class=\"close-popup\" aria-label=\"Close\"&gt;&amp;times;&lt;\/button&gt;\r\n &lt;h2&gt;Product Categories&lt;\/h2&gt;\r\n &lt;?php\r\n wp_list_categories([\r\n 'taxonomy' =&gt; 'product_cat',\r\n 'title_li' =&gt; '',\r\n 'show_count' =&gt; false,\r\n 'hierarchical' =&gt; true\r\n ]);\r\n ?&gt;\r\n &lt;\/div&gt;\r\n &lt;\/div&gt;\r\n &lt;?php\r\n});\r\n <\/code><\/pre>\n<\/blockquote>\n<h2><span class=\"ez-toc-section\" id=\"3_Add_the_styling\"><\/span>3. Add the styling<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Create a new file inside the same plugin folder called <code>style.css<\/code> and paste this CSS:<\/p>\n<blockquote>\n<pre> #wc-floating-btn {\r\n position: fixed;\r\n bottom: 100px;\r\n right: 20px;\r\n background: #ffcc00;\r\n color: #000;\r\n padding: 10px 15px;\r\n border-radius: 50px;\r\n font-size: 14px;\r\n z-index: 9999;\r\n cursor: pointer;\r\n}\r\n#wc-cat-popup {\r\n position: fixed;\r\n top: 0; left: 0;\r\n width: 100%; height: 100%;\r\n background: rgba(0,0,0,.6);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 10000;\r\n}\r\n#wc-cat-popup.hidden {\r\n display: none;\r\n}\r\n.wc-cat-popup-content {\r\n background: #fff;\r\n padding: 20px;\r\n max-width: 400px;\r\n width: 90%;\r\n border-radius: 12px;\r\n overflow-y: auto;\r\n max-height: 80%;\r\n}\r\n.close-popup {\r\n background: none;\r\n border: none;\r\n font-size: 24px;\r\n float: right;\r\n cursor: pointer;\r\n}\r\n <\/pre>\n<\/blockquote>\n<h2><span class=\"ez-toc-section\" id=\"4_Add_the_JavaScript\"><\/span>4. Add the JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>In the same folder, create a file called <code>script.js<\/code> and paste this:<\/p>\n<blockquote>\n<pre> jQuery(document).ready(function($){\r\n $('#wc-floating-btn').on('click', function(){\r\n $('#wc-cat-popup').removeClass('hidden');\r\n });\r\n $('.close-popup, #wc-cat-popup').on('click', function(e){\r\n if(e.target !== this) return;\r\n $('#wc-cat-popup').addClass('hidden');\r\n });\r\n $(document).on('keydown', function(e){\r\n if(e.key === \"Escape\"){\r\n $('#wc-cat-popup').addClass('hidden');\r\n }\r\n });\r\n});\r\n <\/pre>\n<\/blockquote>\n<h2><span class=\"ez-toc-section\" id=\"5_Activate_the_plugin\"><\/span>5. Activate the plugin<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ol>\n<li>\n<p>Go to <strong>WordPress Dashboard \u2192 Plugins<\/strong>.<\/p>\n<\/li>\n<li>\n<p>Find <strong>WC Floating Categories Popup<\/strong>.<\/p>\n<\/li>\n<li>\n<p>Click <strong>Activate<\/strong>.<\/p>\n<\/li>\n<\/ol>\n<p>You should now see a small <strong>yellow \u201cCategories\u201d button<\/strong> floating at the bottom right of every page. When clicked, it opens a popup with your full WooCommerce category tree.<\/p>\n<div class=\"su-image-carousel  su-image-carousel-columns-2 su-image-carousel-has-spacing su-image-carousel-crop su-image-carousel-crop-16-9 su-image-carousel-has-lightbox su-image-carousel-has-outline su-image-carousel-adaptive su-image-carousel-slides-style-photo su-image-carousel-controls-style-dark su-image-carousel-align-center\" style=\"\" data-flickity-options='{\"groupCells\":true,\"cellSelector\":\".su-image-carousel-item\",\"adaptiveHeight\":false,\"cellAlign\":\"left\",\"prevNextButtons\":true,\"pageDots\":false,\"autoPlay\":5000,\"imagesLoaded\":true,\"contain\":true,\"selectedAttraction\":0.025000000000000001,\"friction\":0.28000000000000003}' id=\"su_image_carousel_6a6835687c841\"><div class=\"su-image-carousel-item\"><div class=\"su-image-carousel-item-content\"><a href=\"https:\/\/danielepais.com\/journal\/wp-content\/uploads\/2025\/09\/floating-button-with-a-popup-menu-for-WooCommerce.jpg\" target=\"_blank\" rel=\"noopener noreferrer\" data-caption=\"\" data-rel=\"lightbox-image-0\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" width=\"768\" height=\"351\" src=\"https:\/\/danielepais.com\/journal\/wp-content\/uploads\/2025\/09\/floating-button-with-a-popup-menu-for-WooCommerce-768x351.jpg\" class=\"\" alt=\"floating button with a popup menu for WooCommerce\" srcset=\"https:\/\/danielepais.com\/journal\/wp-content\/uploads\/2025\/09\/floating-button-with-a-popup-menu-for-WooCommerce-768x351.jpg 768w, https:\/\/danielepais.com\/journal\/wp-content\/uploads\/2025\/09\/floating-button-with-a-popup-menu-for-WooCommerce-300x137.jpg 300w, https:\/\/danielepais.com\/journal\/wp-content\/uploads\/2025\/09\/floating-button-with-a-popup-menu-for-WooCommerce-700x320.jpg 700w, https:\/\/danielepais.com\/journal\/wp-content\/uploads\/2025\/09\/floating-button-with-a-popup-menu-for-WooCommerce-1536x703.jpg 1536w, https:\/\/danielepais.com\/journal\/wp-content\/uploads\/2025\/09\/floating-button-with-a-popup-menu-for-WooCommerce.jpg 1854w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/><\/a><\/div><\/div><div class=\"su-image-carousel-item\"><div class=\"su-image-carousel-item-content\"><a href=\"https:\/\/danielepais.com\/journal\/wp-content\/uploads\/2025\/09\/Mobile-Version-floating-button-menu-for-WooCommerce-09-29-2025_07_03_PM.jpg\" target=\"_blank\" rel=\"noopener noreferrer\" data-caption=\"\" data-rel=\"lightbox-image-1\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" width=\"757\" height=\"1600\" src=\"https:\/\/danielepais.com\/journal\/wp-content\/uploads\/2025\/09\/Mobile-Version-floating-button-menu-for-WooCommerce-09-29-2025_07_03_PM.jpg\" class=\"\" alt=\"Mobile Version floating button menu for WooCommerce 09 29 2025 07 03 PM\" srcset=\"https:\/\/danielepais.com\/journal\/wp-content\/uploads\/2025\/09\/Mobile-Version-floating-button-menu-for-WooCommerce-09-29-2025_07_03_PM.jpg 757w, https:\/\/danielepais.com\/journal\/wp-content\/uploads\/2025\/09\/Mobile-Version-floating-button-menu-for-WooCommerce-09-29-2025_07_03_PM-142x300.jpg 142w, https:\/\/danielepais.com\/journal\/wp-content\/uploads\/2025\/09\/Mobile-Version-floating-button-menu-for-WooCommerce-09-29-2025_07_03_PM-700x1480.jpg 700w, https:\/\/danielepais.com\/journal\/wp-content\/uploads\/2025\/09\/Mobile-Version-floating-button-menu-for-WooCommerce-09-29-2025_07_03_PM-727x1536.jpg 727w\" sizes=\"(max-width: 757px) 100vw, 757px\" \/><\/a><\/div><\/div><\/div><script id=\"su_image_carousel_6a6835687c841_script\">if(window.SUImageCarousel){setTimeout(function() {window.SUImageCarousel.initGallery(document.getElementById(\"su_image_carousel_6a6835687c841\"))}, 0);}var su_image_carousel_6a6835687c841_script=document.getElementById(\"su_image_carousel_6a6835687c841_script\");if(su_image_carousel_6a6835687c841_script){su_image_carousel_6a6835687c841_script.parentNode.removeChild(su_image_carousel_6a6835687c841_script);}<\/script>\n<h2><span class=\"ez-toc-section\" id=\"6_Usage\"><\/span>6.\u00a0Usage<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li>\n<p>Click the floating\u00a0<strong>Categories<\/strong>\u00a0button to open the popup menu.<\/p>\n<\/li>\n<li>\n<p>Navigate categories and subcategories to quickly browse products.<\/p>\n<\/li>\n<li>\n<p>Close the popup by pressing\u00a0<strong>ESC<\/strong>, clicking outside the popup, or hitting the close button.<\/p>\n<\/li>\n<li>\n<p>Customize the button style and position by editing the included CSS (<code>style.css<\/code>).<\/p>\n<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"7_Tips_for_customization\"><\/span>7. Tips for customization<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li>\n<p><strong>Change the color\/position<\/strong> by editing the CSS in <code>style.css<\/code>.<\/p>\n<\/li>\n<li>\n<p><strong>Hide empty categories<\/strong> by adding <code>'hide_empty' =&gt; true<\/code> in the <code>wp_list_categories()<\/code> call.<\/p>\n<\/li>\n<li>\n<p><strong>Improve accessibility<\/strong> by adjusting ARIA labels if needed.<\/p>\n<\/li>\n<li>\n<p><strong>Enhance features<\/strong> with a search bar, \u201cexpand\/collapse all\u201d option, or icons.<\/p>\n<\/li>\n<\/ul>\n<p>\ud83d\udc49 That\u2019s it! You now have a <strong>responsive floating menu<\/strong> that helps customers quickly browse your product categories.<br \/>\n[<a title=\"A lightweight WordPress plugin that adds a WooCommerce Manu floating button to your site\" href=\"https:\/\/danielepais.com\/journal\/free-downloads\/\" target=\"_blank\" rel=\"noopener\">Download Now<\/a>] and give your customers a faster, easier way to navigate your WooCommerce store!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>One simple way to do this is by adding a floating button with a popup menu for WooCommerce. A button\u00a0that opens a popup menu with all your product categories<\/p>\n","protected":false},"author":1,"featured_media":8671,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[562,561,233],"tags":[],"acf":[],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 4.9.8 - aioseo.com -->\n\t<meta name=\"description\" content=\"One simple way to do this is by adding a floating button with a popup menu for WooCommerce. A button that opens a popup menu with all your product categories\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Daniele Pais\"\/>\n\t<meta name=\"google-site-verification\" content=\"googleb91c9505ed997b99\" \/>\n\t<meta name=\"msvalidate.01\" content=\"AD1C96C338E051848BE08C67378B20CA\" \/>\n\t<meta name=\"keywords\" content=\"web design,web development,wordpress\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/danielepais.com\/journal\/how-to-create-a-floating-popup-menu-for-woocommerce-categories\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 4.9.8\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Daniele Pais Blog\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"How to build a menu for WooCommerce with a floating button\" \/>\n\t\t<meta property=\"og:description\" content=\"One simple way to do this is by adding a floating button with a popup menu for WooCommerce. A button that opens a popup menu with all your product categories\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/danielepais.com\/journal\/how-to-create-a-floating-popup-menu-for-woocommerce-categories\/\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/danielepais.com\/journal\/wp-content\/uploads\/2025\/09\/Create-a-Floating-Popup-Menu-for-WooCommerce.jpg\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/danielepais.com\/journal\/wp-content\/uploads\/2025\/09\/Create-a-Floating-Popup-Menu-for-WooCommerce.jpg\" \/>\n\t\t<meta property=\"og:image:width\" content=\"850\" \/>\n\t\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2025-09-29T13:03:18+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2025-09-29T13:08:39+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary\" \/>\n\t\t<meta name=\"twitter:site\" content=\"@daniele_pais\" \/>\n\t\t<meta name=\"twitter:title\" content=\"How to build a menu for WooCommerce with a floating button\" \/>\n\t\t<meta name=\"twitter:description\" content=\"One simple way to do this is by adding a floating button with a popup menu for WooCommerce. A button that opens a popup menu with all your product categories\" \/>\n\t\t<meta name=\"twitter:image\" content=\"https:\/\/danielepais.com\/journal\/wp-content\/uploads\/2017\/10\/daniele-pais-digital-design.png\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/how-to-create-a-floating-popup-menu-for-woocommerce-categories\\\/#article\",\"name\":\"How to build a menu for WooCommerce with a floating button\",\"headline\":\"How to Create a Floating Popup Menu for WooCommerce Categories\",\"author\":{\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/author\\\/_-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2--2\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/#person\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/Create-a-Floating-Popup-Menu-for-WooCommerce.jpg\",\"width\":850,\"height\":400,\"caption\":\"Create a Floating Popup Menu for WooCommerce\"},\"datePublished\":\"2025-09-29T20:03:18+07:00\",\"dateModified\":\"2025-09-29T20:08:39+07:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/how-to-create-a-floating-popup-menu-for-woocommerce-categories\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/how-to-create-a-floating-popup-menu-for-woocommerce-categories\\\/#webpage\"},\"articleSection\":\"Web Design, Web Development, Wordpress\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/how-to-create-a-floating-popup-menu-for-woocommerce-categories\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/danielepais.com\\\/journal\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/category\\\/web\\\/#listItem\",\"name\":\"Web\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/category\\\/web\\\/#listItem\",\"position\":2,\"name\":\"Web\",\"item\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/category\\\/web\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/category\\\/web\\\/wordpress\\\/#listItem\",\"name\":\"Wordpress\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/category\\\/web\\\/wordpress\\\/#listItem\",\"position\":3,\"name\":\"Wordpress\",\"item\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/category\\\/web\\\/wordpress\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/how-to-create-a-floating-popup-menu-for-woocommerce-categories\\\/#listItem\",\"name\":\"How to Create a Floating Popup Menu for WooCommerce Categories\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/category\\\/web\\\/#listItem\",\"name\":\"Web\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/how-to-create-a-floating-popup-menu-for-woocommerce-categories\\\/#listItem\",\"position\":4,\"name\":\"How to Create a Floating Popup Menu for WooCommerce Categories\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/category\\\/web\\\/wordpress\\\/#listItem\",\"name\":\"Wordpress\"}}]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/#person\",\"name\":\"Daniele Pais\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/how-to-create-a-floating-popup-menu-for-woocommerce-categories\\\/#personImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/86bedf0ab24a6d4a4f32de230cc797ef?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Daniele Pais\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/author\\\/_-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2--2\\\/#author\",\"url\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/author\\\/_-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2--2\\\/\",\"name\":\"Daniele Pais\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/how-to-create-a-floating-popup-menu-for-woocommerce-categories\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/86bedf0ab24a6d4a4f32de230cc797ef?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Daniele Pais\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/how-to-create-a-floating-popup-menu-for-woocommerce-categories\\\/#webpage\",\"url\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/how-to-create-a-floating-popup-menu-for-woocommerce-categories\\\/\",\"name\":\"How to build a menu for WooCommerce with a floating button\",\"description\":\"One simple way to do this is by adding a floating button with a popup menu for WooCommerce. A button that opens a popup menu with all your product categories\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/how-to-create-a-floating-popup-menu-for-woocommerce-categories\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/author\\\/_-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2--2\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/author\\\/_-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2--2\\\/#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/Create-a-Floating-Popup-Menu-for-WooCommerce.jpg\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/how-to-create-a-floating-popup-menu-for-woocommerce-categories\\\/#mainImage\",\"width\":850,\"height\":400,\"caption\":\"Create a Floating Popup Menu for WooCommerce\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/how-to-create-a-floating-popup-menu-for-woocommerce-categories\\\/#mainImage\"},\"datePublished\":\"2025-09-29T20:03:18+07:00\",\"dateModified\":\"2025-09-29T20:08:39+07:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/#website\",\"url\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/\",\"name\":\"Phuket Web Design\",\"description\":\"Digital Print\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/danielepais.com\\\/journal\\\/#person\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"How to build a menu for WooCommerce with a floating button","description":"One simple way to do this is by adding a floating button with a popup menu for WooCommerce. A button that opens a popup menu with all your product categories","canonical_url":"https:\/\/danielepais.com\/journal\/how-to-create-a-floating-popup-menu-for-woocommerce-categories\/","robots":"max-image-preview:large","keywords":"web design,web development,wordpress","webmasterTools":{"google-site-verification":"googleb91c9505ed997b99","msvalidate.01":"AD1C96C338E051848BE08C67378B20CA","miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/danielepais.com\/journal\/how-to-create-a-floating-popup-menu-for-woocommerce-categories\/#article","name":"How to build a menu for WooCommerce with a floating button","headline":"How to Create a Floating Popup Menu for WooCommerce Categories","author":{"@id":"https:\/\/danielepais.com\/journal\/author\/_-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2--2\/#author"},"publisher":{"@id":"https:\/\/danielepais.com\/journal\/#person"},"image":{"@type":"ImageObject","url":"https:\/\/danielepais.com\/journal\/wp-content\/uploads\/2025\/09\/Create-a-Floating-Popup-Menu-for-WooCommerce.jpg","width":850,"height":400,"caption":"Create a Floating Popup Menu for WooCommerce"},"datePublished":"2025-09-29T20:03:18+07:00","dateModified":"2025-09-29T20:08:39+07:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/danielepais.com\/journal\/how-to-create-a-floating-popup-menu-for-woocommerce-categories\/#webpage"},"isPartOf":{"@id":"https:\/\/danielepais.com\/journal\/how-to-create-a-floating-popup-menu-for-woocommerce-categories\/#webpage"},"articleSection":"Web Design, Web Development, Wordpress"},{"@type":"BreadcrumbList","@id":"https:\/\/danielepais.com\/journal\/how-to-create-a-floating-popup-menu-for-woocommerce-categories\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/danielepais.com\/journal#listItem","position":1,"name":"Home","item":"https:\/\/danielepais.com\/journal","nextItem":{"@type":"ListItem","@id":"https:\/\/danielepais.com\/journal\/category\/web\/#listItem","name":"Web"}},{"@type":"ListItem","@id":"https:\/\/danielepais.com\/journal\/category\/web\/#listItem","position":2,"name":"Web","item":"https:\/\/danielepais.com\/journal\/category\/web\/","nextItem":{"@type":"ListItem","@id":"https:\/\/danielepais.com\/journal\/category\/web\/wordpress\/#listItem","name":"Wordpress"},"previousItem":{"@type":"ListItem","@id":"https:\/\/danielepais.com\/journal#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/danielepais.com\/journal\/category\/web\/wordpress\/#listItem","position":3,"name":"Wordpress","item":"https:\/\/danielepais.com\/journal\/category\/web\/wordpress\/","nextItem":{"@type":"ListItem","@id":"https:\/\/danielepais.com\/journal\/how-to-create-a-floating-popup-menu-for-woocommerce-categories\/#listItem","name":"How to Create a Floating Popup Menu for WooCommerce Categories"},"previousItem":{"@type":"ListItem","@id":"https:\/\/danielepais.com\/journal\/category\/web\/#listItem","name":"Web"}},{"@type":"ListItem","@id":"https:\/\/danielepais.com\/journal\/how-to-create-a-floating-popup-menu-for-woocommerce-categories\/#listItem","position":4,"name":"How to Create a Floating Popup Menu for WooCommerce Categories","previousItem":{"@type":"ListItem","@id":"https:\/\/danielepais.com\/journal\/category\/web\/wordpress\/#listItem","name":"Wordpress"}}]},{"@type":"Person","@id":"https:\/\/danielepais.com\/journal\/#person","name":"Daniele Pais","image":{"@type":"ImageObject","@id":"https:\/\/danielepais.com\/journal\/how-to-create-a-floating-popup-menu-for-woocommerce-categories\/#personImage","url":"https:\/\/secure.gravatar.com\/avatar\/86bedf0ab24a6d4a4f32de230cc797ef?s=96&d=mm&r=g","width":96,"height":96,"caption":"Daniele Pais"}},{"@type":"Person","@id":"https:\/\/danielepais.com\/journal\/author\/_-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2--2\/#author","url":"https:\/\/danielepais.com\/journal\/author\/_-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2--2\/","name":"Daniele Pais","image":{"@type":"ImageObject","@id":"https:\/\/danielepais.com\/journal\/how-to-create-a-floating-popup-menu-for-woocommerce-categories\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/86bedf0ab24a6d4a4f32de230cc797ef?s=96&d=mm&r=g","width":96,"height":96,"caption":"Daniele Pais"}},{"@type":"WebPage","@id":"https:\/\/danielepais.com\/journal\/how-to-create-a-floating-popup-menu-for-woocommerce-categories\/#webpage","url":"https:\/\/danielepais.com\/journal\/how-to-create-a-floating-popup-menu-for-woocommerce-categories\/","name":"How to build a menu for WooCommerce with a floating button","description":"One simple way to do this is by adding a floating button with a popup menu for WooCommerce. A button that opens a popup menu with all your product categories","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/danielepais.com\/journal\/#website"},"breadcrumb":{"@id":"https:\/\/danielepais.com\/journal\/how-to-create-a-floating-popup-menu-for-woocommerce-categories\/#breadcrumblist"},"author":{"@id":"https:\/\/danielepais.com\/journal\/author\/_-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2--2\/#author"},"creator":{"@id":"https:\/\/danielepais.com\/journal\/author\/_-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2--2\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/danielepais.com\/journal\/wp-content\/uploads\/2025\/09\/Create-a-Floating-Popup-Menu-for-WooCommerce.jpg","@id":"https:\/\/danielepais.com\/journal\/how-to-create-a-floating-popup-menu-for-woocommerce-categories\/#mainImage","width":850,"height":400,"caption":"Create a Floating Popup Menu for WooCommerce"},"primaryImageOfPage":{"@id":"https:\/\/danielepais.com\/journal\/how-to-create-a-floating-popup-menu-for-woocommerce-categories\/#mainImage"},"datePublished":"2025-09-29T20:03:18+07:00","dateModified":"2025-09-29T20:08:39+07:00"},{"@type":"WebSite","@id":"https:\/\/danielepais.com\/journal\/#website","url":"https:\/\/danielepais.com\/journal\/","name":"Phuket Web Design","description":"Digital Print","inLanguage":"en-US","publisher":{"@id":"https:\/\/danielepais.com\/journal\/#person"}}]},"og:locale":"en_US","og:site_name":"Daniele Pais Blog","og:type":"article","og:title":"How to build a menu for WooCommerce with a floating button","og:description":"One simple way to do this is by adding a floating button with a popup menu for WooCommerce. A button that opens a popup menu with all your product categories","og:url":"https:\/\/danielepais.com\/journal\/how-to-create-a-floating-popup-menu-for-woocommerce-categories\/","og:image":"https:\/\/danielepais.com\/journal\/wp-content\/uploads\/2025\/09\/Create-a-Floating-Popup-Menu-for-WooCommerce.jpg","og:image:secure_url":"https:\/\/danielepais.com\/journal\/wp-content\/uploads\/2025\/09\/Create-a-Floating-Popup-Menu-for-WooCommerce.jpg","og:image:width":850,"og:image:height":400,"article:published_time":"2025-09-29T13:03:18+00:00","article:modified_time":"2025-09-29T13:08:39+00:00","twitter:card":"summary","twitter:site":"@daniele_pais","twitter:title":"How to build a menu for WooCommerce with a floating button","twitter:description":"One simple way to do this is by adding a floating button with a popup menu for WooCommerce. A button that opens a popup menu with all your product categories","twitter:image":"https:\/\/danielepais.com\/journal\/wp-content\/uploads\/2017\/10\/daniele-pais-digital-design.png"},"aioseo_meta_data":{"post_id":"8661","title":"How to build a menu for WooCommerce with a floating button","description":null,"keywords":null,"keyphrases":{"focus":{"keyphrase":"menu for WooCommerce.","score":69,"analysis":{"keyphraseInTitle":{"score":3,"maxScore":9,"error":1},"keyphraseInDescription":{"score":9,"maxScore":9,"error":0},"keyphraseLength":{"score":9,"maxScore":9,"error":0,"length":3},"keyphraseInURL":{"score":5,"maxScore":5,"error":0},"keyphraseInIntroduction":{"score":9,"maxScore":9,"error":0},"keyphraseInSubHeadings":{"score":3,"maxScore":9,"error":1},"keyphraseInImageAlt":{"score":9,"maxScore":9,"error":0},"keywordDensity":{"score":0,"type":"low","maxScore":9,"error":1}}},"additional":[]},"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":"","og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"Article","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":"-1","robots_max_videopreview":"-1","robots_max_imagepreview":"large","priority":null,"frequency":"default","location":null,"local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"created":"2025-09-29 11:35:42","updated":"2025-09-29 13:09:58","ai":null,"seo_analyzer_scan_date":null},"_links":{"self":[{"href":"https:\/\/danielepais.com\/journal\/wp-json\/wp\/v2\/posts\/8661"}],"collection":[{"href":"https:\/\/danielepais.com\/journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/danielepais.com\/journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/danielepais.com\/journal\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/danielepais.com\/journal\/wp-json\/wp\/v2\/comments?post=8661"}],"version-history":[{"count":0,"href":"https:\/\/danielepais.com\/journal\/wp-json\/wp\/v2\/posts\/8661\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/danielepais.com\/journal\/wp-json\/wp\/v2\/media\/8671"}],"wp:attachment":[{"href":"https:\/\/danielepais.com\/journal\/wp-json\/wp\/v2\/media?parent=8661"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/danielepais.com\/journal\/wp-json\/wp\/v2\/categories?post=8661"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/danielepais.com\/journal\/wp-json\/wp\/v2\/tags?post=8661"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}