如何删除woocommerce中相关产品部分的边界线？

Question

I am making a wordpress theme with woocommerce integration. How to remove orange border on related products section only on single product page like screenshot below? So it will show related products section with borderless

Please check out scripts below:

related.php

<?php
/**
 * Related Products
 *
 * @author      WooThemes
 * @package     WooCommerce/Templates
 * @version     1.6.4
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly
}

global $product, $woocommerce_loop;

if ( empty( $product ) || ! $product->exists() ) {
    return;
}

$related = $product->get_related( $posts_per_page );

if ( sizeof( $related ) == 0 ) return;

$args = apply_filters( 'woocommerce_related_products_args', array(
    'post_type'            => 'product',
    'ignore_sticky_posts'  => 1,
    'no_found_rows'        => 1,
    'posts_per_page'       => $posts_per_page,
    'orderby'              => $orderby,
    'post__in'             => $related,
    'post__not_in'         => array( $product->id )
) );

$products = new WP_Query( $args );

$woocommerce_loop['columns'] = $columns;

if ( $products->have_posts() ) : ?>

    <div class="related products">

        <h2><?php _e( 'Related Products', 'woocommerce' ); ?></h2>

        <?php woocommerce_product_loop_start(); ?>

            <?php while ( $products->have_posts() ) : $products->the_post(); ?>

                <?php wc_get_template_part( 'content', 'product' ); ?>

            <?php endwhile; // end of the loop. ?>

        <?php woocommerce_product_loop_end(); ?>

    </div>

<?php endif;

wp_reset_postdata();

woocommerce.css

.woocommerce .products ul li, .woocommerce ul.products li:hover {
    border: 2px solid;
    border-color: #f37020;
}

Answer 1

Add following code in your CSS:

.related.products .woocommerce .products ul li, .related.products .woocommerce ul.products li:hover {
    border: none!important;
}