wordpress + woocommerce

cosmo98 · 26 Mag 2020

salve, sto realizzando un ecommerce per mia sorella, di base ho installato wordpress con woocommerce e tema storefront che sembra proprio adatto per il mio scopo. Volevo personalizzare alcune cose a mio piacimento, ad esempio volevo togliere quel form di ricerca "cerca prodotti" nell'header, dato che a mio parere è inguardabile e poi ce un altro nella sidebar laterale. Ecco come posso modificare l'html del tema wordpress?
chiaramente ho già individuato l'elemento facendo l'ispeziona della pagina caricata, ma non so proprio dove sostituirlo

grazie in anticipo a chi saprà aiutarmi.

macus_adi · 26 Mag 2020

cosmo98 ha scritto:
Ecco come posso modificare l'html del tema wordpress?

Nel file header.php

cosmo98 · 26 Mag 2020

macus_adi ha scritto:
Nel file header.php

avevo già provato ad editare il file "header.php" del tema "storefront" ma non trovo l'elemento interessato.
facendo l'ispeziona l'elemento che voglio togliere è questo:

HTML:

<input type="search" id="woocommerce-product-search-field-0" class="search-field" placeholder="Cerca prodotti…" value="" name="s">

ma nella mia pagina header.php non è presente:

HTML:

<?php
/**
 * The header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="content">
 *
 * @package storefront
 */

?><!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2.0">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">

<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>

<?php wp_body_open(); ?>

<?php do_action( 'storefront_before_site' ); ?>

<div id="page" class="hfeed site">
    <?php do_action( 'storefront_before_header' ); ?>

    <header id="masthead" class="site-header" role="banner" style="<?php storefront_header_styles(); ?>">

        <?php
        /**
         * Functions hooked into storefront_header action
         *
         * @hooked storefront_header_container                 - 0
         * @hooked storefront_skip_links                       - 5
         * @hooked storefront_social_icons                     - 10
         * @hooked storefront_site_branding                    - 20
         * @hooked storefront_secondary_navigation             - 30
         * @hooked storefront_product_search                   - 40
         * @hooked storefront_header_container_close           - 41
         * @hooked storefront_primary_navigation_wrapper       - 42
         * @hooked storefront_primary_navigation               - 50
         * @hooked storefront_header_cart                      - 60
         * @hooked storefront_primary_navigation_wrapper_close - 68
         */
        do_action( 'storefront_header' );
        ?>

    </header><!-- #masthead -->

    <?php
    /**
     * Functions hooked in to storefront_before_content
     *
     * @hooked storefront_header_widget_region - 10
     * @hooked woocommerce_breadcrumb - 10
     */
    do_action( 'storefront_before_content' );
    ?>

    <div id="content" class="site-content" tabindex="-1">
        <div class="col-full">

        <?php
        do_action( 'storefront_content_top' );

Sarà che viene richiamato da una funzione integrata di wordpress? Se si quale?
Grazie in anticipo

eugenanye · 12 Nov 2020

cosmo98 ha scritto:
salve, sto realizzando un ecommerce per mia sorella, di base ho installato wordpress con woocommerce e tema storefront che sembra proprio adatto per il mio scopo. Volevo personalizzare alcune cose a mio piacimento, ad esempio volevo togliere quel form di ricerca "cerca prodotti" nell'header, dato che a mio parere è inguardabile e poi ce un altro nella sidebar laterale. Ecco come posso modificare l'html del tema wordpress?
chiaramente ho già individuato l'elemento facendo l'ispeziona della pagina caricata, ma non so proprio dove sostituirlo

grazie in anticipo a chi saprà aiutarmi. png to ico

nessun consiglio o commento ?

brunotech · 30 Nov 2020

Ciao, se devi solo non far apparire quell'elemento la soluzione più semplice è usare un comando CSS per nasconderlo. Usa questo:

#woocommerce-product-search-field-0 {
display:hidden!important;
}

Se non funziona con l'ID può essere che tu debba usare la class search-field. In quel caso usa questo:

.search-field {
display:hidden!important;
}

Per quanto riguarda il dove scrivere il comando, ti rimando a questa guida su come inserire CSS personalizzato in WordPress.

Comunque, se per qualche motivo ti ritrovi a dover modificare i file del tema (quindi a modificare html) ricorda che se personalizzi i file del tema, perderai le modifiche al primo aggiornamento del tema. Per evitare ciò devi creare un cosiddetto tema child (che è una specie di copia del tema originale, nel tuo caso StoreFront) e fare le modifiche sui file del tema child (ossia del tema "copia"). Ti rimando a seguire questa guida apposita su come creare un tema child per Wordpress prima di fare le modifiche.

Infine, se può esserti utile, puoi controllare questo articolo che consiglia un plugin che aiuta a trovare i file da modificare nel tuo tema WordPress.

Spero di esserti stato utile.

Ciao.

Cerca

Cerca

wordpress + woocommerce

cosmo98

Nuovo Utente

macus_adi

Utente Attivo

cosmo98

Nuovo Utente

eugenanye

Nuovo Utente

brunotech

Nuovo Utente

Discussioni simili