添加css类到添加到购物车按钮,WooCommerce

时间:2015-09-08 作者:JohnF

我正在寻找一种方法,将自定义类添加到单个产品的“添加到购物车”按钮中。Woocommerce中的php页面。我尝试了以下方法,但没有任何结果:

将整个woocommerce文件夹从“插件”文件夹复制到“主题/我的主题/woocommerce”

  • 修改“themes/MY-THEME/woocommerce/loop/add-to-cart.php”中的“add-to-cart.php”文件
    if ( ! defined( \'ABSPATH\' ) ) {
        exit; // Exit if accessed directly
    }
    
    global $product;
    
    echo apply_filters( \'woocommerce_loop_add_to_cart_link\',
        sprintf( \'<a href="%s" rel="nofollow" data-product_id="%s" data-product_sku="%s" data-quantity="%s" class="button %s product_type_%s">%s</a>\',
            esc_url( $product->add_to_cart_url() ),
            esc_attr( $product->id ),
            esc_attr( $product->get_sku() ),
            esc_attr( isset( $quantity ) ? $quantity : 1 ),
            $product->is_purchasable() && $product->is_in_stock() ? \'add_to_cart_button MY-TEST-CLASS-HERE\' : \'\',
            esc_attr( $product->product_type ),
            esc_html( $product->add_to_cart_text() )
        ),
    $product );
    
    尽管我在源代码中看不到“MY-TEST-CLASS-HERE”。我做错了什么?

  • 3 个回复
    SO网友:tao

    如中所述their documentation WooCommerce提供了一个模板结构。在主题中复制WC不会有任何效果。

    创建woocommerce 主题中的文件夹templates 您的woocommerce 主题文件夹。请注意,您需要防止结构templates 文件夹在您的woocommerce 要使其工作,请使用主题文件夹woocommerce 您喜欢的文件夹。他们在插件中有加载优先级templates. 提示:不要复制主题中插件的所有模板!仅限要修改的内容。WC不时更新其模板并添加功能。WooCommerce还将告诉您,在升级后,您保存在主题中的模板何时可能在插件中有升级版本。

    顺便说一句,我怀疑否决票不是针对问题本身,而是针对标题。我打赌你知道如何给按钮添加类。你不知道的是如何使用WooCommerce的模板系统。因为你没有谷歌它,我认为你(技术上)知道怎么做。请原谅我的讽刺,要么就是那一票,要么就是另一票。

    SO网友:drjorgepolanco

    我发现的最简单的方法(有点粗糙)是将按钮包装在span标记中,将类添加到span中,然后在css中将属性应用到从span继承的按钮:

    <span class="my-nice-class">
        <?php woocommerce_get_template( \'loop/add-to-cart.php\' ); ?>
    </span>
    
    然后在css中:

    .my-nice-class .button {
        color: black;
    }
    

    SO网友:grlwondr

    您是否使用子主题?如果不是,我建议这样做。然后,您可以在子主题的“style.css”文件中自定义按钮样式,方法是编辑样式“add\\u to\\u cart\\u button”与创建新类

    相关推荐

    在带有PHP的子主题中包含style.css

    在里面https://codex.wordpress.org/Child_Themes 这是包含样式的最佳实践。css在子主题中,必须将下面的代码放入函数中。php的子主题,但将“父样式”替换为可以在函数中找到的父主题的参数。父主题的php。我在我的主题文件中找不到它,那里也没有多少代码。使用@import包含父主题样式表的方法不适用于我,放入文件的css不会在任何浏览器的站点上显示自己。function my_theme_enqueue_styles() { $parent_s