Wordpress woocommerce

Status
Niet open voor verdere reacties.

AjaciedNick

Gebruiker
Lid geworden
4 nov 2012
Berichten
129
Ik ben met wordpress bezig en heb het thema naar mijn wensen kunnen aanpassen.
Nu heb ik de plugin woocommerce geinstalleerd, alleen wil ik hem anders weergeve

Ik wil namelijk de rode knop met meer informatie centreren en de tekst wijzigen. Ik heb alleen geen idee in welk bestand.

https://www.hondensoort.nl/rassen/
 
Kan je niet met een fatsoenlijke editor naar de HTML-code ervan zoeken, of delen van de HTML-code?
 
Zoek in de stylesheet (.css bestand) de tekst: ul.products li.product .button {
en wijzig de regels eronder in het volgende.
Code:
ul.products li.product .button {
    height: auto;
    padding: 8px 10px;
    width: calc(100% - 30px);
    text-align: center;
}

Dan is de "Meer informatie" knop over de volle breedte en de tekst op de knop gecentreerd.
 
dankje, nu is hij in het midden.
Maar hoe kan ik nu de tekst veranderen?

Die titel die erboven staat weg en zetten op de tekst waar nu "meer informatie" staat
 
Heb je al in de code naar die HTML-code, of delen daarvan?
 
Ik heb geen idee in welk bestand ik moet kijken.

Dit is in het thema de inc/woocommerce.php
PHP:
<?php
/**
 * WooCommerce Compatibility File
 *
 * @link https://woocommerce.com/
 *
 * @package covernews
 */

/**
 * WooCommerce setup function.
 *
 * @link https://docs.woocommerce.com/document/third-party-custom-theme-compatibility/
 * @link https://github.com/woocommerce/woocommerce/wiki/Enabling-product-gallery-features-(zoom,-swipe,-lightbox)-in-3.0.0
 *
 * @return void
 */
function covernews_woocommerce_setup()
{
    add_theme_support('woocommerce');
    add_theme_support('wc-product-gallery-zoom');
    add_theme_support('wc-product-gallery-lightbox');
    add_theme_support('wc-product-gallery-slider');
}

add_action('after_setup_theme', 'covernews_woocommerce_setup');

/**
 * WooCommerce specific scripts & stylesheets.
 *
 * @return void
 */
function covernews_woocommerce_scripts()
{


    $font_path = WC()->plugin_url() . '/assets/fonts/';
    $inline_font = '@font-face {
			font-family: "star";
			src: url("' . $font_path . 'star.eot");
			src: url("' . $font_path . 'star.eot?#iefix") format("embedded-opentype"),
				url("' . $font_path . 'star.woff") format("woff"),
				url("' . $font_path . 'star.ttf") format("truetype"),
				url("' . $font_path . 'star.svg#star") format("svg");
			font-weight: normal;
			font-style: normal;
		}';

    wp_add_inline_style('covernews-woocommerce-style', $inline_font);
}

add_action('wp_enqueue_scripts', 'covernews_woocommerce_scripts');

/**
 * Add 'woocommerce-active' class to the body tag.
 *
 * @param  array $classes CSS classes applied to the body tag.
 * @return array $classes modified to include 'woocommerce-active' class.
 */
function covernews_woocommerce_active_body_class($classes)
{
    $classes[] = 'woocommerce-active';

    return $classes;
}

add_filter('body_class', 'covernews_woocommerce_active_body_class');

function covernews_product_archive_title($title)
{
    if (is_shop() && $shop_id = wc_get_page_id('shop')) {
        $title = get_the_title($shop_id);
    }
    return $title;
}

add_filter('get_the_archive_title', 'covernews_product_archive_title');


/**
 * Products per page.
 *
 * @return integer number of products.
 */
function covernews_woocommerce_products_per_page()
{
    return 12;
}

add_filter('loop_shop_per_page', 'covernews_woocommerce_products_per_page');

/**
 * Product gallery thumnbail columns.
 *
 * @return integer number of columns.
 */
function covernews_woocommerce_thumbnail_columns()
{
    return 4;
}

add_filter('woocommerce_product_thumbnails_columns', 'covernews_woocommerce_thumbnail_columns');

/**
 * Default loop columns on product archives.
 *
 * @return integer products per row.
 */
function covernews_woocommerce_loop_columns()
{
    return 3;
}

add_filter('loop_shop_columns', 'covernews_woocommerce_loop_columns');




/**
 * Related Products Args.
 *
 * @param array $args related products args.
 * @return array $args related products args.
 */
function covernews_woocommerce_related_products_args($args)
{
    $defaults = array(
        'posts_per_page' => 3,
        'columns' => 3,
    );

    $args = wp_parse_args($defaults, $args);

    return $args;
}

add_filter('woocommerce_output_related_products_args', 'covernews_woocommerce_related_products_args');

if (!function_exists('covernews_woocommerce_product_columns_wrapper')) {
    /**
     * Product columns wrapper.
     *
     * @return  void
     */
    function covernews_woocommerce_product_columns_wrapper()
    {
        $columns = covernews_woocommerce_loop_columns();
        echo '<div class="columns-' . absint($columns) . '">';
    }
}
add_action('woocommerce_before_shop_loop', 'covernews_woocommerce_product_columns_wrapper', 40);

if (!function_exists('covernews_woocommerce_product_columns_wrapper_close')) {
    /**
     * Product columns wrapper close.
     *
     * @return  void
     */
    function covernews_woocommerce_product_columns_wrapper_close()
    {
        echo '</div>';
    }
}
add_action('woocommerce_after_shop_loop', 'covernews_woocommerce_product_columns_wrapper_close', 40);

/**
 * Remove default WooCommerce wrapper.
 */
remove_action('woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10);
remove_action('woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10);
remove_action('wp_footer', 'woocommerce_demo_store', 10);


/**
 * Remove default WooCommerce breadcrumbs.
 */
remove_action('woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0);

if (!function_exists('covernews_woocommerce_wrapper_before')) {
    /**
     * Before Content.
     *
     * Wraps all WooCommerce content in wrappers which match the theme markup.
     *
     * @return void
     */
    function covernews_woocommerce_wrapper_before()
    {
        ?>
        <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">
        <?php
    }
}
add_action('woocommerce_before_main_content', 'covernews_woocommerce_wrapper_before');

if (!function_exists('covernews_woocommerce_wrapper_after')) {
    /**
     * After Content.
     *
     * Closes the wrapping divs.
     *
     * @return void
     */
    function covernews_woocommerce_wrapper_after()
    {
        ?>
        </main><!-- #main -->
        </div><!-- #primary -->
        <?php
    }
}
add_action('woocommerce_after_main_content', 'covernews_woocommerce_wrapper_after');

/**
 * Sample implementation of the WooCommerce Mini Cart.
 *
 * You can add the WooCommerce Mini Cart to header.php like so ...
 *
 * <?php
 * if ( function_exists( 'covernews_woocommerce_header_cart' ) ) {
 * covernews_woocommerce_header_cart();
 * }
 * ?>
 */

if (!function_exists('covernews_woocommerce_cart_link_fragment')) {
    /**
     * Cart Fragments.
     *
     * Ensure cart contents update when products are added to the cart via AJAX.
     *
     * @param array $fragments Fragments to refresh via AJAX.
     * @return array Fragments to refresh via AJAX.
     */
    function covernews_woocommerce_cart_link_fragment($fragments)
    {
        ob_start();
        covernews_woocommerce_cart_icon();
        $fragments['.af-cart-icon-and-count'] = ob_get_clean();

        return $fragments;
    }
}
add_filter('woocommerce_add_to_cart_fragments', 'covernews_woocommerce_cart_link_fragment');

if (!function_exists('covernews_woocommerce_cart_link')) {
    /**
     * Cart Link.
     *
     * Displayed a link to the cart including the number of items present and the cart total.
     *
     * @return void
     */
    function covernews_woocommerce_cart_link()
    {
        ?>
        <a class="cart-contents" href="<?php echo esc_url(wc_get_cart_url()); ?>"
           title="<?php esc_attr_e('View your shopping cart', 'covernews'); ?>">
            <?php
            $item_count_text = sprintf(
            /* translators: number of items in the mini cart. */
                _n('%d item', '%d items', WC()->cart->get_cart_contents_count(), 'covernews'),
                WC()->cart->get_cart_contents_count()
            );
            ?>
            <span class="amount"><?php echo wp_kses_data(WC()->cart->get_cart_subtotal()); ?></span> <span
                    class="count"><?php echo esc_html($item_count_text); ?></span>
        </a>
        <?php
    }
}


if (!function_exists('covernews_woocommerce_cart_icon')) {
    /**
     * Cart Link.
     *
     * Displayed a link to the cart including the number of items present and the cart total.
     *
     * @return void
     */
    function covernews_woocommerce_cart_icon()
    {
        ?>
        <div class="af-cart-icon-and-count dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
            <i class="fa fa-shopping-cart"></i>
            <span class="item-count"><?php echo esc_html(WC()->cart->get_cart_contents_count()); ?></span>
        </div>
        <?php
    }
}

if (!function_exists('covernews_woocommerce_header_cart')) {
    /**
     * Display Header Cart.
     *
     * @return void
     */
    function covernews_woocommerce_header_cart()
    {
        if (is_cart()) {
            $class = 'current-menu-item';
        } else {
            $class = '';
        }
        ?>

        <div class="af-cart-wrap">
        <div class="af-cart-icon-and-count dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
            <i class="fa fa-shopping-cart"></i>
            <span class="item-count"><?php echo esc_html(WC()->cart->get_cart_contents_count()); ?></span>
        </div>
        <div class="top-cart-content primary-bgcolor dropdown-menu">
            <ul class="site-header-cart">

                <li>
                    <?php
                    $instance = array(
                        'title' => '',
                    );

                    the_widget('WC_Widget_Cart', $instance);
                    ?>
                </li>
            </ul>
        </div>
        </div>

        <?php
    }
}



function covernews_get_products($number_of_products, $category=0, $show, $orderby='date', $order="DESC" ){


    $product_visibility_term_ids = wc_get_product_visibility_term_ids();

    $query_args = array(
        'posts_per_page' => $number_of_products,
        'post_status'    => 'publish',
        'post_type'      => 'product',
        'no_found_rows'  => 1,
        'order'          => $order,
        'meta_query'     => array(),
        'tax_query'      => array(
            'relation' => 'AND',
        ),
    );

    if ( absint($category) > 0 ) {
        $query_args['tax_query'][] = array(
            'taxonomy' => 'product_cat',
            'field'    => 'term_taxonomy_id',
            'terms'    => $category

        );

    }

    switch ( $show ) {
        case 'featured' :
            $query_args['tax_query'][] = array(
                'taxonomy' => 'product_visibility',
                'field'    => 'term_taxonomy_id',
                'terms'    => $product_visibility_term_ids['featured'],
            );
            break;
        case 'onsale' :
            $product_ids_on_sale    = wc_get_product_ids_on_sale();
            $product_ids_on_sale[]  = 0;
            $query_args['post__in'] = $product_ids_on_sale;
            break;

    }

    switch ( $orderby ) {
        case 'price' :
            $query_args['meta_key'] = '_price';
            $query_args['orderby']  = 'meta_value_num';
            break;
        case 'rand' :
            $query_args['orderby']  = 'rand';
            break;
        case 'sales' :
            $query_args['meta_key'] = 'total_sales';
            $query_args['orderby']  = 'meta_value_num';
            break;
        default :
            $query_args['orderby']  = 'date';
    }

    return new WP_Query( apply_filters( 'covernews_product_query_args', $query_args ) );
}


if (!function_exists('covernews_woocommerce_template_loop_hooks')) {
    function covernews_woocommerce_template_loop_hooks()
    {

        add_action('covernews_woocommerce_template_loop_product_link_open', 'woocommerce_template_loop_product_link_open');
        add_action('covernews_woocommerce_template_loop_product_link_close', 'woocommerce_template_loop_product_link_close');
        add_action('covernews_woocommerce_show_product_loop_sale_flash', 'woocommerce_show_product_loop_sale_flash');
        add_action('covernews_woocommerce_template_loop_product_thumbnail', 'woocommerce_template_loop_product_thumbnail');
        add_action('covernews_woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_title');
        add_action('covernews_woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_rating', 5);
        add_action('covernews_woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price');
        add_action('covernews_woocommerce_template_loop_add_to_cart', 'woocommerce_template_loop_add_to_cart');
    }
}


add_action('wp_loaded', 'covernews_woocommerce_template_loop_hooks');
 
Daarom ook mijn advies: Pak een goede editor. Daarmee kan je in een heel project zoeken, en dus de hele 'codebase'.
Op een zelfde manier heb ik wel eens vaker diverse templates doorgespit. Soms moet je op delen ervan zoeken, omdat het kan dat de HTML-code wordt aangepast door Wordpress zelf, of dynamisch via JavaScript.
 
Welke editor raad je dan aan?
ik wijzig nu zelden de code dus doe het alleen met kladblok.
 
Ikzelf gebruik NetBeans.

Kladblok is echt een no-go voor programmeren. Voor iets simpels is Notepad++ dannog wel handig.
Maar als je met grote projecten werkt, moet je ook groots inzetten, met bijv. NetBeans, Zend Studio of PhpStorm.
 
Sorry zo een programma ziet er al ingewikkeld uit, ik zal hem maar zo laten..
Als je er zo na 10 minuten al over denkt, dan zie ik toch een gebrek aan motivatie ;)
Iets wat zeker niet hoort bij iemand die een website wilt aanpassen als uitdaging.
 
Ik wou de website ook niet aanpassen als uitdaging, wou hem mooier maken.
En ben al uren aan het zoeken, ga er niet nog meer insteken
 
woocommerce past zich vaak aan bij je thema maar bestaat uit vaste elementen.

Om die te veranderen moet je er wel wat voor over hebben.
Wil je echt zaken veranderen zoals de standaard tekst, de kleur wellicht of andere zaken, dan zul je toch echt in de html moeten duiken.

Hier ook wat leesvoer : http://www.wcommerce.nl/category/layout-aanpassingen/

Met Elementor kan je layout veranderen: https://www.sijweb.nl/productpagina-woocommerce-aanpassen-elementor/

Of neem een ander template van Woocommerce, https://www.wplounge.nl/beste-woocommerce-templates-2020/
 
Je hebt het jezelf al niet makkelijker gemaakt.
Wordpress site
Parent theme: Cover News
Child theme: Hard News
Plugins:
Woocommerce
Yoast SEO

Waarbij ik ervoor zou kiezen om Yoast SEO uit te laten staan, totdat de site eruit ziet en doet wat ik wil.

Om eenvoudige wijzigingen aan te brengen kun je volstaan met de ingebouwde editor
https://www.hondensoort.nl/wp-admin/theme-editor.php
 
Ik wou de website ook niet aanpassen als uitdaging, wou hem mooier maken.
En ben al uren aan het zoeken, ga er niet nog meer insteken
Ik snap niet waarom je uren staat te zoeken? NetBeans kan prima in een hele map zoeken?
 
Je kan misschien forumgebruiker damnsharp een berichtje sturen als je een kleiin vraagje hebt en daarna het antwoord alsnog hier posten.
Teksten aanpassen doe je binnen WordPress en WooCommerce, echter in dit geval wil je 2 teksten met elkaar omwisselen en dat kan alleen in de theme. Als je hier (nog) niet voldoende ervaring mee hebt kan je het volgende ergens onderaan in de html zetten. Dit scriptje (testen heb ik niet gedaan) wisselt de 2 teksten om.
Code:
<script>
// lus loopt door alle product objecten
var ProductSet = document.querySelectorAll(".products .product");
for (var i = 0; i < ProductSet.lenght; i++) {
    // selecteer de objecten title en button
    var ProdTtl = ProductSet[i].querySelector('.woocommerce-loop-product__title');
    var ProdBtn = ProductSet[i].querySelector('.button');
    // de content van beide objecten omwisselen
    var TitleText = ProdTtl.innerHTML;
    ProdTtl.innerHTML = ProdBtn.innerHTML;
    ProdBtn.innerHTML = TitleText;
}
</script>
 
Laatst bewerkt:
Ik snap niet waarom je uren staat te zoeken? NetBeans kan prima in een hele map zoeken?

Omdat ik doorgaans niks met HTML/PHP doe en daar dus verder geen verstand van heb? Mensen weten niet altijd overal iets vanaf.

@Maestro de child theme is alleen een andere header en paar css codes.
Yoast zet ik uit ja. Moest hem even hebben voor de breadcrumbs vanuit yoast.

@Bron, in welk bestand onderaan?
 
Laatst bewerkt:
Omdat ik doorgaans niks met HTML/PHP doe en daar dus verder geen verstand van heb? Mensen weten niet altijd overal iets vanaf.
Iets zoeken is ook geen rocket-science en heeft geen biet met programmeren te maken.
 
Iets zoeken is ook geen rocket-science en heeft geen biet met programmeren te maken.

Hier praat je net of iedereen alles moet weten... als je toch niet weet in welk bestand of wat je moet zoeken word het lastig, en is het dus wat jij zegt wel rocket-science :)
 
Hier praat je net of iedereen alles moet weten... als je toch niet weet in welk bestand of wat je moet zoeken word het lastig, en is het dus wat jij zegt wel rocket-science :)
Nee, dat heb ik niet gezegd.

NetBeans kan prima in een hele map zoeken?
Je kan gewoon in je hele WordPress WooCommerce theme's zoeken. Zonder programmeerwerk, en in een handomdraai.
Een kwestie van wat klikken, je zoekwoord intypen en en zoeken maar.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan