天道酬勤,学无止境

Woocommerce - External/Affiliate Product Image and title to External Link (New tab)

I'm starting with programming with wordpress and woocommerce. I need help after searching for Stack.

I need the images and titles of the products of my store to point to the affiliate link without going through the single post page. And that everything opens in a new tab.

Been following this thread: Woocommerce - External/Affiliate Product Image to External Link (Buy url)

I have used the Edit # 2 code from Sadoo and it works perfectly for me.

remove_action('woocommerce_before_shop_loop_item', 'woocommerce_template_loop_product_link_open');
add_action('woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_link_open', 15);

add_action('woocommerce_before_shop_loop_item', 'woocommerce_add_aff_link_open', 10);
add_action('woocommerce_before_shop_loop_item_title', 'woocommerce_add_aff_link_close', 10);

function woocommerce_add_aff_link_open(){
  $product = wc_get_product(get_the_ID());
  if( $product->is_type( 'external' ) )
    echo '<a href="' . $product->get_product_url() . '" class="woocommerce-LoopProductImage-link">';
}

function woocommerce_add_aff_link_close(){
  $product = wc_get_product(get_the_ID());
  if( $product->is_type( 'external' ) )
    echo '</a>';
}

I just need the title to link like the image and everything opens in new tabs.

Can someone say how can I continue?

Thank you

IMAGE

评论

If you want to open link attached to image in a new tab for a external products in your shop page then edit your code like these

remove_action('woocommerce_before_shop_loop_item', 'woocommerce_template_loop_product_link_open');
add_action('woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_link_open', 15);
add_action('woocommerce_before_shop_loop_item', 'woocommerce_add_aff_link_open', 10);
add_action('woocommerce_before_shop_loop_item_title', 'woocommerce_add_aff_link_close', 10);

function woocommerce_add_aff_link_open(){
    $product = wc_get_product(get_the_ID());

    if( $product->is_type( 'external' ) ) {
        echo '<a target="_blank" href="' . $product->get_product_url() . '" class="">';
    }
}

function woocommerce_add_aff_link_close(){
    $product = wc_get_product(get_the_ID());

    if( $product->is_type( 'external' ) ) {
        echo '</a>';
    }
}

Then if you want title will be opened in a new tab with external link than add these overridden woocommerce function to your functions.php file of your theme too

function woocommerce_template_loop_product_link_open() {
    global $product;

    if( $product->is_type( 'external' ) ) {
        $link = apply_filters( 'woocommerce_loop_product_link', $product->get_product_url(), $product );
        echo '<a target="_blank" href="' . esc_url( $link ) . '" class="woocommerce-LoopProduct-link woocommerce-loop-product__link">';
    } else {
        $link = apply_filters( 'woocommerce_loop_product_link', get_the_permalink(), $product );
        echo '<a href="' . esc_url( $link ) . '" class="woocommerce-LoopProduct-link woocommerce-loop-product__link">';
    }
} 

Here is an cleaner approach to how you add target="_blank" to links on archive pages to open them in new tab:

function ns_open_in_new_tab($args, $product) 
{
    if( $product->is_type('external') ) {
        // Inject target="_blank" into the attributes array
        $args['attributes']['target'] = '_blank';
    }    

    return $args;
}
add_filter( 'woocommerce_loop_add_to_cart_args', 'ns_open_in_new_tab', 10, 2 );

Replace ns_ part with your own namespace abbreviation.

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • Woocommerce:特色图片与产品图片不同(Woocommerce: Featured image different than product image)
    问题 有没有一种方法可以为产品添加要显示在产品列表中的特色图片,但又可以显示另一张图片作为产品图片? (仅是图像,而不是图像库)? 单击列表中的产品(带有特色图像)时,产品仅显示带有说明和内容的图像,但显示的是其他图像,而不是特色图像。 回答1 您可以将“产品库”中的第一张图像设置为“产品图像”,并且您设置的特色图像将显示在“产品列表”页面上。 现在要将“产品库”中的第一个图像设置为“产品图像”,您需要覆盖woocommerce模板文件-product-image.php。 要覆盖,请将文件从woocommerce插件文件夹复制到您的theme / woocommerce / single-product / product-image.php 将<div>部分替换为以下代码- <div class="images"> <?php $attachment_ids = $product->get_gallery_attachment_ids(); isset ($placeholder_width)? : $placeholder_width=0; isset ($placeholder_height)? : $placeholder_height=0; if ( $attachment_ids ) { $attachment_id = $attachment_ids[0]; if
  • 将 Woo Commerce 下拉列表转换为单选按钮(Converting Woo Commerce dropdowns into Radio Buttons)
    问题 我无法将变体下拉列表转换为启用 woocommerce 的站点的单选按钮。 我已经尝试了此处找到的答案,但似乎无法使此解决方案起作用。 我也试过编辑 variable.php 文件中的代码。 到目前为止最成功的是第二种方法,编辑variable.php 代码并将标签更改为标签。 问题是单击单选按钮时不会触发自然的 jQuery 事件。 如果你们中有人知道将下拉列表转换为收音机的更简单的方法,或者只是让 jQuery 事件触发,我们将不胜感激。 我可以得到的相关代码: <?php $loop = 0; foreach ( $attributes as $name => $options ) : $loop++; ?> <tr> <td class="label"><label for="<?php echo sanitize_title($name); ?>"><?php echo $woocommerce->attribute_label($name); ?></label></td> <td class="value"><select id="<?php echo esc_attr( sanitize_title($name) ); ?>" name="attribute_<?php echo sanitize_title($name); ?>"> <option
  • Converting Woo Commerce dropdowns into Radio Buttons
    I'm having trouble converting the variation dropdowns into radio buttons a woocommerce enabled site. I've tried the answer found here but I can't seem to make this solution work. I've also tried editing the code in the variable.php file. So far the most success is the second approach, editing the variable.php code and changing the tags to tags. The problem is the natural jQuery event isn't triggered when the radio buttons are clicked. If any of you know a simpler way to convert the dropdowns to radios, or simply make the jQuery event fire, it'd be much appreciated. Relevant code I could get my
  • 在WooCommerce中以编程方式创建可变产品和两个新属性(Create programmatically a variable product and two new attributes in WooCommerce)
    问题 我想以编程方式创建具有两个新的Variante属性的变量产品(“父”产品)-所有这些都来自WordPress插件(因此没有对API的HTTP请求)。 这两个变量属性也应该动态创建。 如何才能做到这一点 ? (使用WooCommerce版本3) 更新:我已经在此上编写了更多行代码,并使用wooCommerce对象尝试了许多解决方案,并使用WordPress数据库在数据库中添加了有关术语,termmeta,术语与文章的关系的缺失数据对象-但没有任何东西足以使它起作用。 而且我无法指出我出了错的地方-这就是为什么我不能提供一个更狭窄的问题-专门针对stackoverflow的事情。 回答1 之后:以编程方式创建具有新属性值的WooCommerce产品变体 在这里,您可以创建具有新产品属性和值的新变量产品的方法: /** * Save a new product attribute from his name (slug). * * @since 3.0.0 * @param string $name | The product attribute name (slug). * @param string $label | The product attribute label (name). */ function save_product_attribute_from_name(
  • Woocommerce - custom email classes creates duplicate emails
    Awhile ago I posted a question regarding a problem, I needed to send out different emails depending on what storage (custom field) the ordered products belonged to. So, if only a product belonging to Storage1 was ordered, only Email1 was supposed to be sent. If one product belonging to Storage1 AND one product belonging to Storage2 was ordered, email1 would be sent out containing product1 and email2 would contain product2. Link to original question: Custom order emails depending on product meta data This all works now, but for some reason I get double emails. If I order one product from
  • Show caption under product gallery in WooCommerce
    I'm trying to show the caption text under the thumbnail in the product page gallery. I need to show the text because there are a lot images in the gallery and each thumb is a part of an engine and the name help the user. The code for the gallery in WooCommerce product page is: echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', sprintf( '<li data-thumb="%s">%s%s<a href="%s" class="%s lightbox" data-rel="ilightbox[product]" data-caption="%s" title="%s" alt="%s"><i class="fa-search-plus"></i></a></li>', $thumb_image, $image_html, $caption_html, $image_link, $image_class,
  • WooCommerce - auto update total price when quantity changed
    I've been searching for several days but I have no answer yet. Basically, I'm trying to replace woocommerce standart "update cart" button with ajax call, which automatically updates order total price when quantity changed. This is my html <div class="cart_item"> <div class="product-thumbnail"> <a href="http://example.com"><img width="90" height="90" src="path to thumbnail"/></a> </div> <div class="product-name"> <a class="cart-page-product__title" href="http://example.com">Product1 name</a> </div> <div class="product-quantity"> <div class="quantity"> <input type="number" step="1" name="cart
  • 通过 WooCommerce 中的挂钩更改产品价格 3+(Change product prices via a hook in WooCommerce 3+)
    问题 在 WooCommerce 中,我需要将所有产品价格乘以一个数字。 所以我使用了以下(通过插件) : add_filter('woocommerce_get_regular_price', array( $this, 'my_custom_price'), 99); add_filter('woocommerce_get_price', array( $this, 'my_custom_price'), 99); function my_custom_price( $original_price ) { global $post, $woocommerce; //Logic for calculating the new price here $new_price = $original_price * 2; //Return the new price (this is the price that will be used everywhere in the store) return $new_price; } 但是,这不适用于变体产品。 我尝试了以下钩子但没有运气: add_filter('woocommerce_get_variation_regular_price', array( $this, 'my_custom_price'), 99); add
  • Move product title above product image on Woocommerce archive pages
    I am trying to move the product title above the product image on the product archive page. I have managed to figure out how to move the information, but the price is moving above the image aswell. I want only the product title to be above the product image. The price should remain below, with the add to cart button etc. Here is my code snippet and screenshot of result so far: remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 ); add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );
  • Woocommerce for WP中的wc_add_to_cart_message钩子的替代方法(Alternative for the wc_add_to_cart_message hook in Woocommerce for WP)
    问题 我使用了Woocommerce中的添加到购物车消息挂钩来编辑文本并从某些按钮中删除一些类。 似乎该挂钩现在在Woocommerce 2.1中已被弃用,我找不到其他选择。 我想从“继续购物”按钮中删除“按钮”类。 此类在Woocommerce核心中定义,我希望对其进行编辑以便将来进行适当的更新。 我要编辑的行位于woocommerce / includes / wc-cart-functions.php第94行。 $message = sprintf('<a href="%s" class="button wc-forward">%s</a> %s', $return_to, __( 'Continue Shopping', 'woocommerce' ), $added_text ); 有人找到这个钩子的合适替代品了吗? 提前致谢! 回答1 这对我有用 add_filter( 'wc_add_to_cart_message', 'custom_add_to_cart_message' ); function custom_add_to_cart_message() { global $woocommerce; $return_to = get_permalink(woocommerce_get_page_id('shop')); $message = sprintf('<a
  • Woocommerce获得下一个/上一个产品相同类别(Woocommerce get next / previous product SAME category)
    问题 我读过这篇文章:Woocommerce获得下一个/上一个产品 并尝试了这个: <?php previous_post_link('%link', 'Previous in category', TRUE); ?> 他们中的任何一个在woocommerce产品类别下工作,有什么主意吗? 提前致谢! 回答1 <?php previous_post_link_product('%link', '« Anterior: %title', true); ?> <?php next_post_link_product('%link', 'Siguiente: %title »', true); ?> 在您的文件yourtheme / functions.php中添加这些功能 function next_post_link_product($format='%link »', $link='%title', $in_same_cat = false, $excluded_categories = '') { adjacent_post_link_product($format, $link, $in_same_cat, $excluded_categories, false); } function previous_post_link_product($format='« %link'
  • Adding a custom field external link to archives category pages
    I have a woocommerce web site. First I would like to add a custom field on admin product pages to set an exernal url that I will use on my Archives category product pages. Also I would like ideally to have this custom field on my admin product pages settings metabox. But the code I have change the link on all archives pages. For now I have this code that is not doing what I need: remove_action( 'woocommerce_before_shop_loop_item', 'woocommerce_template_loop_product_link_open', 10 ); add_action( 'woocommerce_before_shop_loop_item', 'mycode_woocommerce_template_loop_product_link_open', 20 )
  • WooCommerce-数量更改时自动更新总价(WooCommerce - auto update total price when quantity changed)
    问题 我已经搜索了几天,但还没有答案。 基本上,我试图用ajax调用替换woocommerce标准的“更新购物车”按钮,该按钮会在数量更改时自动更新订单总价。 这是我的HTML <div class="cart_item"> <div class="product-thumbnail"> <a href="http://example.com"><img width="90" height="90" src="path to thumbnail"/></a> </div> <div class="product-name"> <a class="cart-page-product__title" href="http://example.com">Product1 name</a> </div> <div class="product-quantity"> <div class="quantity"> <input type="number" step="1" name="cart[some_security_key][qty]" value="1" class="input-text qty text" size="4"/> </div> </div> <div class="product-subtotal"><span class="amount">2 000</span><
  • Woocommerce获得产品(Woocommerce get products)
    问题 我使用以下代码从我的WordPress网站中获取了WooCommerce产品类别的列表: <?php $taxonomy = 'product_cat'; $orderby = 'name'; $show_count = 0; // 1 for yes, 0 for no $pad_counts = 0; // 1 for yes, 0 for no $hierarchical = 0; // 1 for yes, 0 for no $title = ''; $empty = 0; $args = array( 'taxonomy' => $taxonomy, 'orderby' => $orderby, 'show_count' => $show_count, 'pad_counts' => $pad_counts, 'hierarchical' => $hierarchical, 'title_li' => $title, 'hide_empty' => $empty ); ?> <?php $all_categories = get_categories( $args ); //print_r($all_categories); foreach ($all_categories as $cat) { //print_r($cat); if($cat->category
  • 从WordPress获取WooCommerce产品类别(Get WooCommerce product categories from WordPress)
    问题 我正在尝试通过WordPress主题中的函数从WooCommerce获取产品类别 function get_me_list_of($atts, $content = null) { $args = array( 'post_type' => 'product', 'posts_per_page' => 10, 'product_cat' => $atts[0]); $loop = new WP_Query( $args ); echo '<h1 class="upp">Style '.$atts[0].'</h1>'; echo "<ul class='mylisting'>"; while ( $loop->have_posts() ) : $loop->the_post(); global $product; echo '<li><a href="'.get_permalink().'">'.get_the_post_thumbnail($loop->post->ID, 'thumbnail').'</a></li>'; echo '<li><a href="'.get_permalink().'">'.$loop->post->post_title.'</a></li>'; echo '<li><a href="">'.get_categories().'</a><
  • Duplicated pic in thumbnail gallery in Woocommerce
    I'm building a Woocommerce site. In the Shop grid overview, I'm showing the Featured Image of each product (see link). This Featured image will be cropped to maintain the same image ratio in the Shop Grid. In the Single Product page, I managed to hide the Featured Image, and make the first of the thumbnails appear in big (see link). I did so with the following code: <div class="images"> <?php $imgid = $product->get_gallery_attachment_ids(); ?> <a href="<?php echo wp_get_attachment_url( $imgid[0] ); ?>" class="woocommerce-main-image zoom first" rel="lightbox[product-gallery]"> <img src="<?php
  • woocommerce的变化(woocommerce variations)
    问题 我正在创建woocommerce主题,并且我有产品变体,即在产品详细信息页面上显示的尺寸,但是问题是我想通过使用产品ID在我的自定义php页面中获得所有变体,任何人都可以帮助我。 提前致谢。 回答1 您可以使用: $available_variations = $product->get_available_variations(); 如果这是一个样式模板,请确保添加global $product; 靠近顶部。 从那里,您可以遍历各种变体,并按自己的意愿做...由于您没有任何特定的输出,我希望这会使您走上正确的轨道。 回答2 您可以使用以下代码: global $woocommerce, $product, $post; // test if product is variable if ($product->is_type( 'variable' )) { $available_variations = $product->get_available_variations(); foreach ($available_variations as $key => $value) { //get values HERE } } 回答3 如下代码: $variations = $product->get_available_variations(); 将返回产品的所有变体
  • 获取购物车商品名称,数量所有详细信息woocommerce(Get cart item name, quantity all details woocommerce)
    问题 我正在尝试将woocommerce购物车项目发送给第三方运输工具。 我需要将商品名称,数量和单价发送给第三方。 如何做到这一点? $items = $woocommerce->cart->get_cart(); foreach($items as $item => $values) { $_product = $values['data']->post; echo $_product->post_title; } 如何获得商品名称,数量和价格? 回答1 试试这个 : <?php global $woocommerce; $items = $woocommerce->cart->get_cart(); foreach($items as $item => $values) { $_product = wc_get_product( $values['data']->get_id()); echo "<b>".$_product->get_title().'</b> <br> Quantity: '.$values['quantity'].'<br>'; $price = get_post_meta($values['product_id'] , '_price', true); echo " Price: ".$price."<br>"; } ?>
  • WooCommerce - 我在哪里可以编辑钩子生成的 HTML?(WooCommerce - where can I edit HTML generated by hooks?)
    问题 我是 WooCommerce 的新手。 无论如何,我想创建自己的主题,所以我遵循了指南并将核心模板文件复制到/mywordpresstheme/woocommerce/ 。 这一切都很好,我正在编辑模板。 然而,WooCommerce 中钩子和动作的工作方式让我感到困惑,我无法弄清楚生成的 HTML 的某些部分来自哪里。 例如,在content-product.php ,有一个获取图像的钩子: <?php /* * woocommerce_before_shop_loop_item_title hook * * @hooked woocommerce_show_product_loop_sale_flash - 10 * @hooked woocommerce_template_loop_product_thumbnail - 10 */ do_action( 'woocommerce_before_shop_loop_item_title' ); ?> 但这是什么? 它从何而来?? 操作名称中是否有关于我可以在哪里找到为编辑而生成的 HTML 的任何线索? 我已经阅读了 WooCommerce 上关于“钩子和过滤器”的文章,但它没有解释关于在何处或如何根据具体情况更改这些内容。 任何帮助将不胜感激。 我是这个系统的新手,我敢肯定我只是忽略了一些非常明显的东西。 谢谢,米奇。
  • WP_Query仅属于多个类别的Woocommerce产品tax_query(WP_Query Woocommerce products that belong in distinct multiple categories only tax_query)
    问题 我正在将WP_Query用于Woocommerce产品,以尝试查询特定类别的产品。 这是对我有用的语法- $args = array( 'posts_per_page' => -1, 'product_cat' => 'category-slug-here', 'post_type' => 'product', 'orderby' => 'title', ); $the_query = new WP_Query( $args ); // The Loop while ( $the_query->have_posts() ) { $the_query->the_post(); echo '' . get_the_title() . '<br /><br />'; } wp_reset_postdata(); 这将返回的数据,但我想传递一个ID,而不是一个类别蛞蝓,进行筛选,我想找到仅存多个类别的产品。 参数product_cat不是WP_Query (至少可以找到),因此我假设这是Woocommerce的自定义内容。 通过他们的文档,我找不到任何可以按类别ID进行过滤的内容,也无法使用AND条件进行过滤。 使用cat , tax_query数组和category__and并没有产生任何结果。 本质上,我想查询类别ID 102和115中都存在的所有产品。如果我必须使用