{"id":4883,"date":"2025-07-10T10:43:43","date_gmt":"2025-07-10T10:43:43","guid":{"rendered":"https:\/\/websavant.ir\/skill\/theme-skill\/woocommerce-plugin-article-developer-demo\/"},"modified":"2025-09-26T13:42:48","modified_gmt":"2025-09-26T13:42:48","slug":"woocommerce-plugin-article-developer-demo","status":"publish","type":"post","link":"https:\/\/websavant.ir\/skill\/theme-skill\/en\/woocommerce-plugin-article-developer-demo\/","title":{"rendered":"WooCommerce Plugin Article &#8211; Developer Demo"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"4883\" class=\"elementor elementor-4883 elementor-2258\">\n\t\t\t\t<div class=\"elementor-element elementor-element-475cdf7 e-flex e-con-boxed e-con e-parent\" data-id=\"475cdf7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-22907ac elementor-widget elementor-widget-skill_breadcrumb\" data-id=\"22907ac\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"skill_breadcrumb.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<nav class=\"skill-breadcrumb\" aria-label=\"breadcrumb\"><a href=\"https:\/\/websavant.ir\/skill\/theme-skill\/en\/\">home<\/a><\/nav>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a50d2a7 e-flex e-con-boxed e-con e-parent\" data-id=\"a50d2a7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-f5b647d e-con-full e-flex e-con e-child\" data-id=\"f5b647d\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7168c04 elementor-widget elementor-widget-heading\" data-id=\"7168c04\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">WooCommerce Plugin Article - Developer Demo<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-974b622 elementor-widget elementor-widget-skill_button_share\" data-id=\"974b622\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"skill_button_share.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t        <div class=\"skill-share-widget\" id=\"skill-share-widget-974b622\">\r\n            <button class=\"skill-share-toggle\">\r\n                                    <span>Share<\/span>\r\n                                <svg aria-hidden=\"true\" class=\"skill-share-btn-icon e-font-icon-svg e-fas-share-alt\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M352 320c-22.608 0-43.387 7.819-59.79 20.895l-102.486-64.054a96.551 96.551 0 0 0 0-41.683l102.486-64.054C308.613 184.181 329.392 192 352 192c53.019 0 96-42.981 96-96S405.019 0 352 0s-96 42.981-96 96c0 7.158.79 14.13 2.276 20.841L155.79 180.895C139.387 167.819 118.608 160 96 160c-53.019 0-96 42.981-96 96s42.981 96 96 96c22.608 0 43.387-7.819 59.79-20.895l102.486 64.054A96.301 96.301 0 0 0 256 416c0 53.019 42.981 96 96 96s96-42.981 96-96-42.981-96-96-96z\"><\/path><\/svg>            <\/button>\r\n            <div class=\"skill-share-socials\">\r\n                <div class=\"skill-share-socials-icons\" style=\"display: flex; flex-direction: row; gap: 20px; width: 100%; justify-content: flex-start;\">\r\n                                        <a href=\"https:\/\/www.facebook.com\/sharer\/sharer.php?u=https%3A%2F%2Fwebsavant.ir%2Fskill%2Ftheme-skill%2Fwoo-demo-developer%2F\" target=\"_blank\" rel=\"noopener\" title=\"facebook\">\r\n                            <i class=\"fab fa-facebook-f\"><\/i>\r\n                        <\/a>\r\n                                            <a href=\"https:\/\/www.linkedin.com\/shareArticle?mini=true&#038;url=https%3A%2F%2Fwebsavant.ir%2Fskill%2Ftheme-skill%2Fwoo-demo-developer%2F\" target=\"_blank\" rel=\"noopener\" title=\"linkedin\">\r\n                            <i class=\"fab fa-linkedin-in\"><\/i>\r\n                        <\/a>\r\n                                            <a href=\"https:\/\/www.instagram.com\/?url=https%3A%2F%2Fwebsavant.ir%2Fskill%2Ftheme-skill%2Fwoo-demo-developer%2F\" target=\"_blank\" rel=\"noopener\" title=\"instagram\">\r\n                            <i class=\"fab fa-instagram\"><\/i>\r\n                        <\/a>\r\n                                            <a href=\"https:\/\/twitter.com\/intent\/tweet?url=https%3A%2F%2Fwebsavant.ir%2Fskill%2Ftheme-skill%2Fwoo-demo-developer%2F\" target=\"_blank\" rel=\"noopener\" title=\"twitter\">\r\n                            <i class=\"fab fa-twitter\"><\/i>\r\n                        <\/a>\r\n                                            <a href=\"https:\/\/t.me\/share\/url?url=https%3A%2F%2Fwebsavant.ir%2Fskill%2Ftheme-skill%2Fwoo-demo-developer%2F\" target=\"_blank\" rel=\"noopener\" title=\"telegram\">\r\n                            <i class=\"fab fa-telegram-plane\"><\/i>\r\n                        <\/a>\r\n                                    <\/div>\r\n                <div class=\"skill-share-link\" style=\"width: 100%; margin-top: 0;\">\r\n                    <input type=\"text\" value=\"https:\/\/websavant.ir\/skill\/theme-skill\/woo-demo-developer\/\" readonly style=\"width: 100%; background: transparent; border: none; color: #8b8b8b; font-size: 15px; direction: ltr; outline: none; padding: 8px 8px;\">\r\n                    <button class=\"skill-share-copy\" title=\"\u06a9\u067e\u06cc \u0644\u06cc\u0646\u06a9\" style=\"font-size: 18px;\">\r\n                        <i class=\"far fa-copy\"><\/i>\r\n                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n        <style>\r\n.skill-share-widget {\r\n    position: relative;\r\n    display: inline-block;\r\n    direction: rtl;\r\n}\r\n.skill-share-toggle {\r\n    background: #080708;\r\n    color: #8d8d8d;\r\n    border: 1px solid #8d8d8d;\r\n    border-radius: 10px;\r\n    padding: 10px 18px;\r\n    cursor: pointer;\r\n    font-size: 18px;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    transition: background 0.2s;\r\n}\r\n.skill-share-toggle:hover {\r\n    background: #22263a;\r\n}\r\n.skill-share-socials {\r\n    position: absolute;\r\n    top: 110%;\r\n    left: 0;\r\n    background: rgba(8,7,8,0.55);\r\n    border: 1px solid #8d8d8d;\r\n    border-radius: 12px;\r\n    padding: 18px 18px 10px 18px;\r\n    min-width: 260px;\r\n    box-shadow: 0 8px 32px rgba(0,0,0,0.18);\r\n    z-index: 99;\r\n    opacity: 0;\r\n    pointer-events: none;\r\n    transform: translateY(0);\r\n    transition: opacity 0.8s cubic-bezier(.4,2,.6,1), max-height 0.8s cubic-bezier(.4,2,.6,1);\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 12px;\r\n    max-height: 0;\r\n    overflow: hidden;\r\n    backdrop-filter: blur(12px) saturate(160%);\r\n    -webkit-backdrop-filter: blur(12px) saturate(160%);\r\n}\r\n.skill-share-widget.active .skill-share-socials {\r\n    opacity: 1;\r\n    pointer-events: auto;\r\n    max-height: 200px;\r\n}\r\n.skill-share-socials a {\r\n    color: #8b8b8b;\r\n    font-size: 22px;\r\n    margin-left: 10px;\r\n    transition: color 0.2s, transform 0.2s;\r\n    display: inline-block;\r\n}\r\n.skill-share-socials a:hover {\r\n    color: #fff;\r\n    transform: scale(1.2) rotate(-8deg);\r\n}\r\n.skill-share-link {\r\n    margin-top: 10px;\r\n    background: #23263a;\r\n    border-radius: 8px;\r\n    padding: 0 8px;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 6px;\r\n    width: 100%;\r\n}\r\n.skill-share-link input {\r\n    background: transparent;\r\n    border: none;\r\n    color: #8b8b8b;\r\n    width: 100%;\r\n    font-size: 15px;\r\n    direction: ltr;\r\n    outline: none;\r\n    padding: 8px 8px;\r\n    margin-bottom: 6px;\r\n}\r\n.skill-share-copy {\r\n    background: none;\r\n    border: none;\r\n    color: #8b8b8b;\r\n    font-size: 18px;\r\n    cursor: pointer;\r\n    transition: color 0.2s;\r\n}\r\n.skill-share-copy:hover {\r\n    color: #fff;\r\n}\r\n<\/style>\r\n        <script>\r\n        (function($){\r\n            var $widget = $('#skill-share-widget-974b622');\r\n            var $toggle = $widget.find('.skill-share-toggle');\r\n            var $socials = $widget.find('.skill-share-socials');\r\n            var $copyBtn = $widget.find('.skill-share-copy');\r\n            var $input = $widget.find('.skill-share-link input');\r\n\r\n            $toggle.on('click', function(e){\r\n                e.stopPropagation();\r\n                $('.skill-share-widget').not($widget).removeClass('active');\r\n                $widget.toggleClass('active');\r\n            });\r\n\r\n            $(document).on('click', function(e){\r\n                if (!$widget.is(e.target) && $widget.has(e.target).length === 0) {\r\n                    $widget.removeClass('active');\r\n                }\r\n            });\r\n\r\n            $copyBtn.on('click', function(e){\r\n                e.stopPropagation();\r\n                $input[0].focus();\r\n                $input[0].setSelectionRange(0, $input[0].value.length);\r\n                try {\r\n                    var successful = document.execCommand('copy');\r\n                    $copyBtn.html('<i class=\\\"fas fa-check\\\"><\/i>');\r\n                    setTimeout(function(){\r\n                        $copyBtn.html('<i class=\\\"far fa-copy\\\"><\/i>');\r\n                    }, 1200);\r\n                } catch (err) {\r\n                    alert('\u06a9\u067e\u06cc \u0646\u0634\u062f!');\r\n                }\r\n            });\r\n        })(jQuery);\r\n        <\/script>\r\n        \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-febe953 e-flex e-con-boxed e-con e-parent\" data-id=\"febe953\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-1e7a810 e-con-full e-flex e-con e-child\" data-id=\"1e7a810\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-77ef6f2 e-con-full e-flex e-con e-child\" data-id=\"77ef6f2\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bc7b337 elementor-widget elementor-widget-skill_thumbnail_post_Widget\" data-id=\"bc7b337\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"skill_thumbnail_post_Widget.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t        <div class=\"skill-thumbnail-post-widget\">\r\n            <img decoding=\"async\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/03\/OGZQE70-1024x1024.jpg\" alt=\"WooCommerce Plugin Article &#8211; Developer Demo\" \/>\r\n        <\/div>\r\n        <style>\r\n        .skill-thumbnail-post-widget {\r\n            position: relative;\r\n            margin: 2rem 0;\r\n            border-radius: 20px;\r\n            overflow: hidden;\r\n            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);\r\n            transition: all 0.3s ease;\r\n        }\r\n        \r\n        .skill-thumbnail-post-widget:hover {\r\n            transform: translateY(-5px);\r\n            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);\r\n        }\r\n        \r\n        .skill-thumbnail-post-widget img {\r\n            width: 100%;\r\n            height: auto;\r\n            display: block;\r\n            border-radius: 20px;\r\n            transition: all 0.3s ease;\r\n        }\r\n        \r\n        .skill-thumbnail-post-widget:hover img {\r\n            transform: scale(1.02);\r\n        }\r\n        \r\n        \/* Responsive styles *\/\r\n        @media (max-width: 768px) {\r\n            .skill-thumbnail-post-widget {\r\n                margin: 1.5rem 0;\r\n            }\r\n        }\r\n        <\/style>\r\n        \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-79873a1 elementor-widget elementor-widget-text-editor\" data-id=\"79873a1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h2>Introducing WooCommerce<\/h2><p class=\"ds-markdown-paragraph\">WooCommerce is a free and open source plugin for the WordPress content management system that allows users to easily set up an online store. With over 5 million active installations, this plugin is one of the most popular e-commerce solutions in the world. From small to large stores, many businesses use WooCommerce to sell physical, digital, and even services.<\/p><ul><li><strong>Free and open source<\/strong> \u2013 no initial cost and the ability to change the code as needed<\/li><li><strong>WordPress Compatibility <\/strong>\u2013 Easy integration with WordPress content management system<\/li><li><strong>Supports multiple payment methods<\/strong> \u2013 including bank gateways, PayPal, and on-site payments<\/li><\/ul><h3>Flexibility and customization<\/h3><p class=\"ds-markdown-paragraph\">Flexibility and customization This plugin is compatible with thousands of other themes and plugins, allowing users to easily customize the look and functionality of their store. Developers can also make advanced changes to it using coding to meet their specific business needs.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-10e1301 elementor-widget elementor-widget-image\" data-id=\"10e1301\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"2560\" height=\"1920\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/03\/3d-illustration-laptop-with-shopping-basket-paper-bags-online-shopping-e-commerce-concept-scaled.jpg\" class=\"attachment-full size-full wp-image-4856\" alt=\"\" srcset=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/03\/3d-illustration-laptop-with-shopping-basket-paper-bags-online-shopping-e-commerce-concept-scaled.jpg 2560w, https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/03\/3d-illustration-laptop-with-shopping-basket-paper-bags-online-shopping-e-commerce-concept-300x225.jpg 300w, https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/03\/3d-illustration-laptop-with-shopping-basket-paper-bags-online-shopping-e-commerce-concept-1024x768.jpg 1024w, https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/03\/3d-illustration-laptop-with-shopping-basket-paper-bags-online-shopping-e-commerce-concept-768x576.jpg 768w, https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/03\/3d-illustration-laptop-with-shopping-basket-paper-bags-online-shopping-e-commerce-concept-1536x1152.jpg 1536w, https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/03\/3d-illustration-laptop-with-shopping-basket-paper-bags-online-shopping-e-commerce-concept-2048x1536.jpg 2048w, https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/03\/3d-illustration-laptop-with-shopping-basket-paper-bags-online-shopping-e-commerce-concept-800x600.jpg 800w\" sizes=\"(max-width: 2560px) 100vw, 2560px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-84fb2a2 elementor-widget elementor-widget-text-editor\" data-id=\"84fb2a2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h2>Easy management of products and payments<\/h2><p class=\"ds-markdown-paragraph\">WooCommerce offers powerful tools for managing products, categories, inventory, and discounts. Additionally, it is compatible with various payment gateways such as PayPal, ZarrinPal, and domestic banking gateways. These features help sellers easily control the sales process and provide a convenient shopping experience for customers.<\/p><ul><li><strong>Advanced product management <\/strong>\u2013 \u200b\u200bability to add physical, digital, and variable products<\/li><li><strong>Extensive plugins<\/strong>\u2013 thousands of free and paid plugins to add new features<\/li><li><strong>Optimized for SEO<\/strong> \u2013 helps improve your store\u2019s ranking in search engines<\/li><\/ul><h2>Strong support community and extensive documentation<\/h2><p class=\"ds-markdown-paragraph\">Because WooCommerce is an open source platform, it is supported by a large community of developers and users. Online forums, official documentation, and numerous tutorials make it easy for users to learn and troubleshoot. This extensive support makes WooCommerce an ideal choice for beginners and professionals.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-bec3fc9 e-flex e-con-boxed e-con e-parent\" data-id=\"bec3fc9\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b703541 elementor-widget elementor-widget-skill_comment_post\" data-id=\"b703541\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"skill_comment_post.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t        <div class=\"skill-comments-widget dark-theme\" dir=\"rtl\">\r\n            <div class=\"skill-no-comments\">No comments have been posted yet.<\/div>\t<div id=\"respond\" class=\"comment-respond\">\n\t\t<h3 id=\"reply-title\" class=\"comment-reply-title\">Post a comment <small><a rel=\"nofollow\" id=\"cancel-comment-reply-link\" href=\"\/skill\/theme-skill\/en\/wp-json\/wp\/v2\/posts\/4883#respond\" style=\"display:none;\">Cancel reply<\/a><\/small><\/h3><form action=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-comments-post.php\" method=\"post\" id=\"skill-commentform\" class=\"skill-comment-form\"><textarea id=\"comment\" name=\"comment\" placeholder=\"Comment text*\" required><\/textarea><input name=\"wpml_language_code\" type=\"hidden\" value=\"en\" \/><input id=\"author\" name=\"author\" type=\"text\" placeholder=\"Your name*\" required \/>\n<input id=\"email\" name=\"email\" type=\"email\" placeholder=\"Email*\" required \/>\n<input id=\"url\" name=\"url\" type=\"text\" placeholder=\"Website (optional)\" \/>\n\n<div class=\"skill-submit-wrap\"><button name=\"submit\" type=\"submit\" id=\"skill-submit\" class=\"skill-submit-btn\">Post a comment<\/button> <input type='hidden' name='comment_post_ID' value='4883' id='comment_post_ID' \/>\n<input type='hidden' name='comment_parent' id='comment_parent' value='0' \/>\n<\/div><\/form>\t<\/div><!-- #respond -->\n\t        <\/div>\r\n        <style>\r\n            .skill-comments-widget.dark-theme {\r\n                background: #0a090a;\r\n                color: #fff;\r\n                border-radius: 14px;\r\n                padding: 32px 24px;\r\n                margin: 24px auto;\r\n                box-shadow: 0 2px 24px rgba(0,0,0,0.18);\r\n                max-width: 1100px;\r\n            }\r\n            .skill-comments-list {\r\n                list-style: none;\r\n                padding: 0;\r\n                margin: 0 0 32px 0;\r\n            }\r\n            .skill-comment-item {\r\n                background: rgba(255, 255, 255, 0.03);\r\n                backdrop-filter: blur(15px);\r\n                -webkit-backdrop-filter: blur(15px);\r\n                border: 1px solid rgba(255, 255, 255, 0.08);\r\n                border-radius: 20px;\r\n                padding: 24px;\r\n                margin-bottom: 24px;\r\n                position: relative;\r\n                transition: all 0.3s ease;\r\n                overflow: hidden;\r\n            }\r\n            .skill-comment-item::before {\r\n                content: '';\r\n                position: absolute;\r\n                top: 0;\r\n                left: 0;\r\n                right: 0;\r\n                bottom: 0;\r\n                background: linear-gradient(135deg, rgba(14, 89, 242, 0.05), rgba(255, 255, 255, 0.02));\r\n                border-radius: 20px;\r\n                z-index: -1;\r\n            }\r\n            .skill-comment-item:hover {\r\n                transform: translateY(-2px);\r\n                box-shadow: 0 8px 25px rgba(14, 89, 242, 0.15);\r\n                border-color: rgba(14, 89, 242, 0.2);\r\n            }\r\n            .skill-comment-child {\r\n                background: rgba(255, 255, 255, 0.05);\r\n                backdrop-filter: blur(20px);\r\n                -webkit-backdrop-filter: blur(20px);\r\n                border: 1px solid rgba(255, 255, 255, 0.1);\r\n                border-radius: 18px;\r\n                margin: 24px 40px 0 0;\r\n                padding: 20px;\r\n                position: relative;\r\n                overflow: hidden;\r\n            }\r\n            .skill-comment-child::before {\r\n                content: '';\r\n                position: absolute;\r\n                top: 0;\r\n                left: 0;\r\n                right: 0;\r\n                bottom: 0;\r\n                background: linear-gradient(135deg, rgba(14, 89, 242, 0.08), rgba(255, 255, 255, 0.03));\r\n                border-radius: 18px;\r\n                z-index: -1;\r\n            }\r\n            .skill-comment-child:hover {\r\n                transform: translateY(-1px);\r\n                box-shadow: 0 6px 20px rgba(14, 89, 242, 0.12);\r\n            }\r\n            .skill-comment-box {\r\n                display: flex;\r\n                flex-direction: row;\r\n                align-items: flex-start;\r\n                gap: 24px;\r\n                position: relative;\r\n            }\r\n            .skill-comment-side {\r\n                display: flex;\r\n                flex-direction: column;\r\n                align-items: center;\r\n                min-width: 80px;\r\n                margin-top: 4px;\r\n            }\r\n            .skill-comment-author-avatar {\r\n                position: relative;\r\n                margin-bottom: 12px;\r\n            }\r\n            .skill-comment-author-avatar img {\r\n                border-radius: 50%;\r\n                width: 56px;\r\n                height: 56px;\r\n                object-fit: cover;\r\n                background: linear-gradient(135deg, #0e59f2, #00d4ff);\r\n                border: 3px solid rgba(255, 255, 255, 0.1);\r\n                box-shadow: 0 4px 15px rgba(14, 89, 242, 0.3);\r\n                transition: all 0.3s ease;\r\n            }\r\n            .skill-comment-author-avatar::after {\r\n                content: '';\r\n                position: absolute;\r\n                top: -2px;\r\n                left: -2px;\r\n                right: -2px;\r\n                bottom: -2px;\r\n                background: linear-gradient(135deg, #0e59f2, #00d4ff);\r\n                border-radius: 50%;\r\n                z-index: -1;\r\n                opacity: 0.3;\r\n                transition: opacity 0.3s ease;\r\n            }\r\n            .skill-comment-item:hover .skill-comment-author-avatar img {\r\n                transform: scale(1.05);\r\n                box-shadow: 0 6px 20px rgba(14, 89, 242, 0.4);\r\n            }\r\n            .skill-comment-item:hover .skill-comment-author-avatar::after {\r\n                opacity: 0.5;\r\n            }\r\n            .skill-comment-author-name {\r\n                color: #0e59f2;\r\n                font-weight: 600;\r\n                font-size: 1.1em;\r\n                margin-bottom: 4px;\r\n                text-align: center;\r\n                text-shadow: 0 0 10px rgba(14, 89, 242, 0.3);\r\n            }\r\n            .skill-comment-date {\r\n                color: rgba(255, 255, 255, 0.7);\r\n                font-size: 0.9em;\r\n                text-align: center;\r\n                background: rgba(255, 255, 255, 0.05);\r\n                padding: 4px 12px;\r\n                border-radius: 12px;\r\n                backdrop-filter: blur(10px);\r\n                -webkit-backdrop-filter: blur(10px);\r\n            }\r\n            .skill-comment-main {\r\n                flex: 1;\r\n                display: flex;\r\n                flex-direction: column;\r\n                justify-content: space-between;\r\n                min-width: 0;\r\n            }\r\n            .skill-comment-content {\r\n                color: #fff;\r\n                font-size: 1.05em;\r\n                margin-bottom: 45px;\r\n                word-break: break-word;\r\n                line-height: 1.6;\r\n                text-shadow: 0 0 5px rgba(255, 255, 255, 0.1);\r\n            }\r\n            .skill-comment-actions {\r\n                display: flex;\r\n                align-items: center;\r\n                justify-content: flex-start;\r\n                position: absolute;\r\n                left: 24px;\r\n                bottom: 16px;\r\n            }\r\n            .skill-reply-icon {\r\n                color: #0e59f2;\r\n                font-size: 1.1em;\r\n                margin-left: 6px;\r\n                transition: all 0.3s ease;\r\n            }\r\n            .skill-comment-actions a {\r\n                color: #0e59f2;\r\n                font-weight: 500;\r\n                text-decoration: none;\r\n                transition: all 0.3s ease;\r\n                display: flex;\r\n                align-items: center;\r\n                gap: 6px;\r\n                background: rgba(14, 89, 242, 0.1);\r\n                padding: 8px 16px;\r\n                border-radius: 20px;\r\n                border: 1px solid rgba(14, 89, 242, 0.2);\r\n                backdrop-filter: blur(10px);\r\n                -webkit-backdrop-filter: blur(10px);\r\n            }\r\n            .skill-comment-actions a:hover {\r\n                color: #fff;\r\n                background: rgba(14, 89, 242, 0.3);\r\n                transform: translateY(-1px);\r\n                box-shadow: 0 4px 12px rgba(14, 89, 242, 0.3);\r\n            }\r\n            .skill-comment-actions a:hover .skill-reply-icon {\r\n                transform: rotate(180deg);\r\n            }\r\n            .skill-no-comments {\r\n                color: rgba(255, 255, 255, 0.8);\r\n                margin-bottom: 32px;\r\n                text-align: center;\r\n                padding: 40px 20px;\r\n                background: rgba(255, 255, 255, 0.03);\r\n                backdrop-filter: blur(15px);\r\n                -webkit-backdrop-filter: blur(15px);\r\n                border: 1px solid rgba(255, 255, 255, 0.08);\r\n                border-radius: 20px;\r\n                position: relative;\r\n                overflow: hidden;\r\n            }\r\n            .skill-no-comments::before {\r\n                content: '';\r\n                position: absolute;\r\n                top: 0;\r\n                left: 0;\r\n                right: 0;\r\n                bottom: 0;\r\n                background: linear-gradient(135deg, rgba(14, 89, 242, 0.05), rgba(255, 255, 255, 0.02));\r\n                border-radius: 20px;\r\n                z-index: -1;\r\n            }\r\n            .skill-no-comments::after {\r\n                content: '\ud83d\udcac';\r\n                font-size: 3em;\r\n                display: block;\r\n                margin-bottom: 16px;\r\n                opacity: 0.6;\r\n            }\r\n            .skill-comment-form {\r\n                margin-top: 32px;\r\n                background: rgba(255, 255, 255, 0.05);\r\n                backdrop-filter: blur(20px);\r\n                -webkit-backdrop-filter: blur(20px);\r\n                border: 1px solid rgba(255, 255, 255, 0.1);\r\n                border-radius: 20px;\r\n                padding: 32px;\r\n                position: relative;\r\n                overflow: hidden;\r\n            }\r\n            .skill-comment-form::before {\r\n                content: '';\r\n                position: absolute;\r\n                top: 0;\r\n                left: 0;\r\n                right: 0;\r\n                bottom: 0;\r\n                background: linear-gradient(135deg, rgba(14, 89, 242, 0.1), rgba(255, 255, 255, 0.05));\r\n                border-radius: 20px;\r\n                z-index: -1;\r\n            }\r\n            .skill-comment-form h3 {\r\n                color: #fff;\r\n                margin-bottom: 24px;\r\n                font-size: 1.5em;\r\n                font-weight: 600;\r\n                text-align: center;\r\n                position: relative;\r\n            }\r\n            .skill-comment-form h3::after {\r\n                content: '';\r\n                position: absolute;\r\n                bottom: -8px;\r\n                left: 50%;\r\n                transform: translateX(-50%);\r\n                width: 60px;\r\n                height: 3px;\r\n                background: linear-gradient(90deg, #0e59f2, #00d4ff);\r\n                border-radius: 2px;\r\n            }\r\n            .skill-comment-form input,\r\n            .skill-comment-form textarea {\r\n                background: rgba(255, 255, 255, 0.08);\r\n                color: #ffffff;\r\n                border: 2px solid rgba(255, 255, 255, 0.1);\r\n                border-radius: 15px;\r\n                padding: 16px 20px;\r\n                width: 100%;\r\n                margin-bottom: 20px;\r\n                font-size: 14px;\r\n                transition: all 0.3s ease;\r\n                backdrop-filter: blur(10px);\r\n                -webkit-backdrop-filter: blur(10px);\r\n            }\r\n            .skill-comment-form input:focus,\r\n            .skill-comment-form textarea:focus {\r\n                outline: none;\r\n                border-color: rgba(14, 89, 242, 0.6);\r\n                box-shadow: 0 0 20px rgba(14, 89, 242, 0.3);\r\n                background: rgba(255, 255, 255, 0.12);\r\n                transform: translateY(-2px);\r\n            }\r\n            .skill-comment-form input::placeholder,\r\n            .skill-comment-form textarea::placeholder {\r\n                color: rgba(255, 255, 255, 0.6);\r\n                font-weight: 300;\r\n            }\r\n            .skill-comment-form textarea {\r\n                min-height: 140px;\r\n                resize: vertical;\r\n                line-height: 1.6;\r\n            }\r\n            \/* Email field: placeholder RTL, typed LTR *\/\r\n            .skill-comment-form input[type=\"email\"] {\r\n                text-align: left;\r\n                direction: ltr;\r\n            }\r\n            .skill-comment-form input[type=\"email\"]:placeholder-shown {\r\n                text-align: right;\r\n                direction: rtl;\r\n            }\r\n            .skill-comment-form input[type=\"email\"]:focus {\r\n                text-align: left;\r\n                direction: ltr;\r\n            }\r\n            .skill-comment-form input[type=\"email\"]:not(:placeholder-shown) {\r\n                text-align: left;\r\n                direction: ltr;\r\n            }\r\n            .skill-submit-btn {\r\n                background: linear-gradient(135deg, #0e59f2, #00d4ff);\r\n                color: #fff;\r\n                border: none;\r\n                padding: 15px 50px 15px 50px;\r\n                border-radius: 50px;\r\n                font-weight: 600;\r\n                cursor: pointer;\r\n                transition: all 0.4s ease;\r\n                font-size: 16px;\r\n                position: relative;\r\n                overflow: hidden;\r\n                box-shadow: 0 8px 25px rgba(14, 89, 242, 0.3);\r\n                text-transform: uppercase;\r\n                letter-spacing: 1px;\r\n            }\r\n            .skill-submit-btn::before {\r\n                content: '';\r\n                position: absolute;\r\n                top: 0;\r\n                left: -100%;\r\n                width: 100%;\r\n                height: 100%;\r\n                background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);\r\n                transition: left 0.5s ease;\r\n            }\r\n            .skill-submit-btn:hover {\r\n                background: linear-gradient(135deg, #00d4ff, #0e59f2);\r\n                transform: translateY(-3px);\r\n                box-shadow: 0 12px 35px rgba(14, 89, 242, 0.4);\r\n            }\r\n            .skill-submit-btn:hover::before {\r\n                left: 100%;\r\n            }\r\n            .skill-submit-btn:active {\r\n                transform: translateY(-1px);\r\n                box-shadow: 0 6px 20px rgba(14, 89, 242, 0.3);\r\n            }\r\n            \r\n            .skill-comment-form input[type=\"checkbox\"],\r\n            .skill-comment-form input[type=\"radio\"] {\r\n                display: none !important;\r\n            }\r\n            \r\n            .skill-comment-form .comment-form-cookies-consent {\r\n                display: none !important;\r\n            }\r\n            \r\n            .skill-comment-form .comment-notes {\r\n                display: none !important;\r\n            }\r\n            \r\n            .skill-comment-form .logged-in-as {\r\n                display: none !important;\r\n            }\r\n            \r\n            .skill-comment-form .comment-form-author,\r\n            .skill-comment-form .comment-form-email,\r\n            .skill-comment-form .comment-form-url,\r\n            .skill-comment-form .comment-form-comment {\r\n                margin-bottom: 20px;\r\n            }\r\n            \r\n            .skill-comment-form .comment-form-author input,\r\n            .skill-comment-form .comment-form-email input,\r\n            .skill-comment-form .comment-form-url input {\r\n                width: 100%;\r\n                box-sizing: border-box;\r\n            }\r\n            \r\n            @media (max-width: 768px) {\r\n                .skill-comment-form {\r\n                    padding: 20px;\r\n                }\r\n                \r\n                .skill-submit-btn {\r\n                    width: 100%;\r\n                    padding: 14px 20px;\r\n                }\r\n            }\r\n            @media (max-width: 700px) {\r\n                .skill-comments-widget.dark-theme {\r\n                    padding: 10px 2px;\r\n                }\r\n                .skill-comment-child {\r\n                    margin: 16px 0 0 0;\r\n                    padding: 16px 8px 0 0;\r\n                }\r\n                .skill-comment-box {\r\n                    flex-direction: column;\r\n                    gap: 8px;\r\n                }\r\n                .skill-comment-side {\r\n                    flex-direction: row-reverse;\r\n                    align-items: center;\r\n                    gap: 8px;\r\n                    min-width: 0;\r\n                }\r\n                .skill-comment-main {\r\n                    margin-top: 8px;\r\n                }\r\n                .skill-comment-actions {\r\n                    left: 8px;\r\n                    bottom: 8px;\r\n                }\r\n            }\r\n        <\/style>\r\n        \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u062e\u0627\u0646\u0647 WooCommerce Plugin Article &#8211; Developer Demo Share Introducing WooCommerce WooCommerce is a free and open source plugin for the WordPress content management system that allows users to easily set up an online store. With over 5 million active installations, this plugin is one of the most popular e-commerce solutions in the world. From small [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":4855,"comment_status":"open","ping_status":"open","sticky":false,"template":"template-post-landing.php","format":"standard","meta":{"footnotes":""},"categories":[73],"tags":[],"class_list":["post-4883","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-demo-developer-en"],"_links":{"self":[{"href":"https:\/\/websavant.ir\/skill\/theme-skill\/en\/wp-json\/wp\/v2\/posts\/4883","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/websavant.ir\/skill\/theme-skill\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/websavant.ir\/skill\/theme-skill\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/websavant.ir\/skill\/theme-skill\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/websavant.ir\/skill\/theme-skill\/en\/wp-json\/wp\/v2\/comments?post=4883"}],"version-history":[{"count":0,"href":"https:\/\/websavant.ir\/skill\/theme-skill\/en\/wp-json\/wp\/v2\/posts\/4883\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/websavant.ir\/skill\/theme-skill\/en\/wp-json\/wp\/v2\/media\/4855"}],"wp:attachment":[{"href":"https:\/\/websavant.ir\/skill\/theme-skill\/en\/wp-json\/wp\/v2\/media?parent=4883"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/websavant.ir\/skill\/theme-skill\/en\/wp-json\/wp\/v2\/categories?post=4883"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/websavant.ir\/skill\/theme-skill\/en\/wp-json\/wp\/v2\/tags?post=4883"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}