如果 WooCommerce 中的产品缺货，则将自定义类添加到链接

Question

在 WooCommerce 中，如果产品缺货，您是否知道向<a> html 元素（产品链接）添加类的方法？

基本上，我在一个页面上有产品链接，每个链接都指向一个特定的产品。如果该产品缺货，我正在尝试将“oos”类添加到产品的链接中。然后我可以为这些链接设置不同的样式。

更多信息： https://jsfiddle.net/Garconis/qtvkxkga/

我正在创建一个 SVG 地图。每个部分/路径将链接到特定产品。如果它链接的产品缺货，则应添加“oos”类（这样该产品就不再可见）。

我不反对使用某种简码，如果这会有所帮助的话。但是短代码需要能够包装每个唯一的 SVG 路径。

有货：

<svg>
    <a href="https://example.com/?p=332">
        <path></path>
    </a>
</svg>

缺货：

<svg>
    <a href="https://example.com/?p=332" class="oos">
        <path></path>
    </a>
</svg>

注意，在 URL 中，我也可以使用产品的 ID，如果这有助于 PHP 找到相应的项目（而不是使用通常的 slug URL）。

Answer 1

最简单的方法应该是为 html <a> 标签构建自定义函数短代码，其中包含产品链接和“缺货”时的附加类：

这是功能代码：

if( !function_exists('custom_shortcode_svg_product_link') ) {

    function custom_shortcode_svg_product_link( $atts, $content = null ) {

        // Shortcode Attributes
        $atts = shortcode_atts(
            array(
                'id' => '',
            ),
            $atts, 'svg_product_link'
        );

        $product_id = $atts['id'];
        // Get an instance of the WC_Product object
        $product = wc_get_product( $product_id );
        // Display the class "oos" when product is out of stock
        $class = $product->is_in_stock() ? '"' : '" class="oos"';
        // The product link
        $product_link = $product->get_permalink();

        // The output
        return '<a href="'.$product_link.$class.'>'.$content.'</a>';
    }
    add_shortcode( 'svg_product_link', 'custom_shortcode_svg_product_link' );
}

代码进入您的活动子主题（或主题）的 function.php 文件或任何插件文件中。

在 WooCommerce 3+ 上测试并输出所需的 html。

---

USAGE 示例 （针对您的情况）：

注意：我对 SVG 文件和 html 格式绝对不熟悉，所以我希望它能与 <svg><path></path></svg> 一起使用。

/*
 * @ id (the product ID argument)
 */
<svg>
    [svg_product_link id="332"]
        <path></path>
    [/svg_product_link]
    </a>
</svg>