Good day to all. Tell me in which file to add a block (div). To wrap 3 elements (heading, paragraph and form) on the main page. You need to make a white background. In the screenshot, I highlighted it in black. Now the code is

<div id="main" class="col-left"> <h1 class="page-title">Каталог</h1> <div class="woof_products_top_panel" style="display: none;"></div> <p class="woocommerce-result-count">Отображаются все 4 результата</p> <form class="woocommerce-ordering" method="get"> <select name="orderby" class="orderby"> <option value="menu_order" selected="selected">Исходная сортировка</option> <option value="popularity">По популярности</option> <option value="date">По новизне</option> <option value="price">Цены: по возрастанию</option> <option value="price-desc">Цены: по убыванию</option> </select> </form> <ul class="products"> </ul> </div>

enter image description here Thank you in advance for the answers.

    2 answers 2

    To begin "Mystile" create a directory \wp-content\themes\mystile\woocommerce\loop\ in your "Mystile" theme directory

    1. Copy the archive-product.php template from \wp-content\plugins\woocommerce\templates\ to \wp-content\themes\mystile\woocommerce\

    2. orderby.php template from \wp-content\plugins\woocommerce\templates\loop\ to \wp-content\themes\mystile\woocommerce\loop\

    Now edit the files we created:

    archive-product.php

    before:

      <?php if ( apply_filters( 'woocommerce_show_page_title', true ) ) : ?> <h1 class="page-title"><?php woocommerce_page_title(); ?></h1> <?php endif; ?>

    open our <div class="page-title-wrap">

      <!-- Start Page Title Wrap--> <div class="page-title-wrap"> <?php if ( apply_filters( 'woocommerce_show_page_title', true ) ) : ?> <h1 class="page-title"><?php woocommerce_page_title(); ?></h1> <?php endif; ?>

    orderby.php

    after:

      <form class="woocommerce-ordering" method="get"> <select name="orderby" class="orderby"> <?php foreach ( $catalog_orderby_options as $id => $name ) : ?> <option value="<?php echo esc_attr( $id ); ?>" <?php selected( $orderby, $id ); ?>><?php echo esc_html( $name ); ?></option> <?php endforeach; ?> </select> <?php // Keep query string vars intact foreach ( $_GET as $key => $val ) { if ( 'orderby' === $key || 'submit' === $key ) { continue; } if ( is_array( $val ) ) { foreach( $val as $innerVal ) { echo '<input type="hidden" name="' . esc_attr( $key ) . '[]" value="' . esc_attr( $innerVal ) . '" />'; } } else { echo '<input type="hidden" name="' . esc_attr( $key ) . '" value="' . esc_attr( $val ) . '" />'; } } ?> </form>

    close our </div>

      <form class="woocommerce-ordering" method="get"> <select name="orderby" class="orderby"> <?php foreach ( $catalog_orderby_options as $id => $name ) : ?> <option value="<?php echo esc_attr( $id ); ?>" <?php selected( $orderby, $id ); ?>><?php echo esc_html( $name ); ?></option> <?php endforeach; ?> </select> <?php // Keep query string vars intact foreach ( $_GET as $key => $val ) { if ( 'orderby' === $key || 'submit' === $key ) { continue; } if ( is_array( $val ) ) { foreach( $val as $innerVal ) { echo '<input type="hidden" name="' . esc_attr( $key ) . '[]" value="' . esc_attr( $innerVal ) . '" />'; } } else { echo '<input type="hidden" name="' . esc_attr( $key ) . '" value="' . esc_attr( $val ) . '" />'; } } ?> </form> </div><!-- End Page Title Wrap-->

    Thus, after updating the Woocommerce plugin, your changes will remain

    • Yes, thank you for the answer, you can do it too, but I did as the person wrote from below, but your method also works, thank you again :) - tweeker
    • If I'm not mistaken in 1 case, if you update the theme, the settings will go off because: - eugene_v
    • \ wp-content \ themes \ mystile \ includes \ theme-woocommerce.php refers to theme files - eugene_v
    • Yes, I’ve already fixed it, thank you. The "hat" appears in the product card, and through your method only on the "Catalog" page, thank you :) - tweeker

    You have the WooCommerce mystile theme installed.

    The output code div id = "main" is in the file \ wp-content \ themes \ mystile \ includes \ theme-woocommerce.php In this file after <div id="main" class="col-left"> add <div id="my_header">

    In the \ wp-content \ plugins \ woocommerce \ templates \ loop \ orderby.php file before </ div>

    • #main This is a part of the product page, if you make a white background, then the whole page, I need only a part, so you need to add a div to the page code, and I don’t know where this file is in the VP - tweeker
    • The above css puts the white background only on the div id = "main", but not on the whole page. If the code is correct, only this div will be white. <form ... is output from the \ wp-content \ plugins \ woocommerce \ templates \ loop \ orderby.php file; it is called from the woocommerce_catalog_ordering function in the \ wp-content \ plugins \ woocommerce \ includes \ wc-template-functions.php div file woof ... is derived from the woof plugin for woocommerce div id = "main" most likely from the theme (there are usually templates for woocommerce). There is no such thing in the plugin itself. But all this is not necessary. Show the page, give css. - KAGG Design
    • Here is the site tiarsekj.bget.ru/shop If #main make bg white will be like this s018.radikal.ru/i527/1610/a3/4bdb408c825f.png - tweeker
    • Yes, the code is not complete, because the advice does not work. Correct the answer. - KAGG Design
    • Yes, thanks for the answer, but I don’t understand a little, I added a new div in the \ wp-content \ themes \ mystile \ includes \ theme-woocommerce.php file, immediately closed it. But on the page "directory" the arrangement of blocks has changed, namely, the basement went to the left side, and the filters to the basement. How can this be corrected? I also did not understand in the \ wp-content \ plugins \ woocommerce \ templates \ loop \ orderby.php file before </ div>, but there are no blocks in this file at all. Div screen screenshot - itmag.es/2KSPf Thank you in advance for the answer. - tweeker