Help: Html Or Css, when customising with snippets??? Pros&cons?

  • I’m currently using WordPress WooCommerce with the Kadence theme pro and the Code Snippets Pro plugin. I’m not very experienced with coding and I’m having trouble adding a “padlock” icon next to the text of my “add to cart” button on the single product pages. I’m using the code snippets with the default theme customizer. By the way, I’m using ChatGPT/Gemini to generate codes. My main question is, “should I provide CSS copied from inspect elements or HTML codes”, when requesting code generation? When I provide the code, it gives me various options for executing the task, including editing HTML, PHP, CSS, or JavaScript. I can choose any of those options, but which approach is best for basic tasks like adding custom text, icons, or changing font colors? its confusing for me.

    here;s an example

    if I should give him css like,

    CSS: woocommerce div.product form.cart .woocommerce-variation-add-to-cart { margin-top: 0.5em }

    or if should I give him HTML like,

    Html: ( <button type=”submit” class=”single\_add\_to\_cart\_button button alt”>Add to cart</button> )

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hi @someone3210,

    Glad you reached out; happy to help!

    When working with WordPress WooCommerce customizations, here’s how to approach different tasks:

    CSS:

      • Use CSS for styling existing elements, such as changing font colors, background colors, margins, and padding.
      • Example: The CSS you provided, woocommerce div.product form.cart .woocommerce-variation-add-to-cart { margin-top: 0.5em }, is useful for adjusting layout and appearance without altering HTML structure. You can find the correct CSS class using the browser’s Inspect Element tool.

      PHP:

        • For altering the structure of elements on your site, such as adding a padlock icon to the “Add to Cart” button, PHP is the best approach. PHP allows you to dynamically modify content at the server level before it reaches the browser.
        • Example: To prepend a padlock icon to the “Add to Cart” button, you can use the following PHP code:
        add_filter('woocommerce_product_single_add_to_cart_text', 'add_padlock_icon_to_cart_button');

function add_padlock_icon_to_cart_button($button) {
    $button_new = '?? ' . $button; // Add the padlock icon before the button text
    return $button_new;
}

        Here is how to add a custom filter or function with Code Snippets plugin:
        https://www.kadencewp.com/help-center/docs/kadence-theme/how-to-add-a-custom-filter-or-function-with-code-snippets/

        How It Works:

        • Filter Hook: The woocommerce_product_single_add_to_cart_text filter modifies the button text.
        • Custom Function: The function add_padlock_icon_to_cart_button adds the icon to the button text.

        Learn more about WordPress and WooCommerce hooks: WordPress Hooks, WooCommerce Hooks.

          Summary:

          • Use CSS for styling existing elements.
          • Use PHP for structural changes or dynamic content modifications.

          I hope this helps. Please let us know how we can help further.

          Cheers,
          Eze

          Hi there,

          We just want to follow-up if you managed to resolve this already.

          This topic has been inactive for a month.

          If you have further questions or need additional assistance, feel free to start a new topic or refer to our Kadence Help Center here: https://www.kadencewp.com/help-center

          Please note that you can also submit a support ticket via these channels.

          Thank you for your understanding!
           
          Kind Regards,
          Michael Taro

        Viewing 2 replies - 1 through 2 (of 2 total)
        • The topic ‘Help: Html Or Css, when customising with snippets??? Pros&cons?’ is closed to new replies.