Woocommerce Produkt thumbnail bildergröße / schwierigkeiten beim vergrößern

Mayestic

Hallo,

ich habe mir erst lokal eine Webseite erstellt und nun diese hochgeladen rouzbehhamzalufard.com ich bin Künstler und mache Gemälde, Skulpturen usw. und wollte die Seite als Homepage mit kleiner Shop Funktion betreiben. So weit es mir möglich war habe ich hier die Suchfunktion fleißig benutzt usw. und konnte viel lernen und bin auch zufrieden mit WordPress.

Ich benutze das Theme von TeFox Azeria http://azeria.tefox.net/ incl. Azeria Portfolio u. Azeria WooCommerce package, so gesehen bin ich ganz zurfrieden, habe mir ein Child Teheme angelegt und losgelegt. Nun bin ich leider an einer stelle angekommen, wo ich trotz suchen im web und hier im Forum einfach nicht weiter komme bzw. alle beschriebenen Vorgehensweisen die ich gefunden habe nicht funktionieren.

Ich möchte im Shop die Produkte thumbnail Bildergröße wie in der Teheme Demo vergrößern, dafür habe ich einiges versucht, aber leider ohne erfolg.

Ich habe in der functions.php mit den unten angezeigten Daten gearbeitet, post-thumbnail u. slider thumbnail funktionieren und lassen sich verändern, related thumbnail verändert sich nicht. Auch nicht nachdem ich mit dem Plugin / Werkzeug Vorschaubilder regenerieren alles neu berechnen lasse.

Code

/**
     * Allow to rewrite defined image sizes from child theme  
     */
    $default_image_sizes = array(
        'post-thumbnail' => array(
            'width'  => 450,
            'height' => 300,
            'crop'   => true
        ),
        'slider-thumbnail' => array(
            'width'  => 1900,
            'height' => 445,
            'crop'   => true
        ),
        'related-thumbnail' => array(
            'width'  => 450,
            'height' => 300,
            'crop'   => true

Alles anzeigen

Ich habe auch in der Costum Css diverse befehle versucht die ich hier und da im Netz gefunden habe, auch leider ohne Erfolg. Auch im style.css habe ich geschaut, jedoch weiß ich nicht was ich da genau ändern muss bzw. blicke als Laie noch nicht ganz durch bzw. wollte bevor ich da dran gehe erst hier nachfragen.

CSS

.entry-thumbnail {
  margin: 0 -30px;
  overflow: hidden;
  clear: both; }
  .entry-thumbnail img {
    display: block; }
  .entry-thumbnail + .entry-content {
    padding: 30px 0 0 0; }
  .is-single > .entry-thumbnail {
    margin: -30px -30px 30px; }
    .is-single > .entry-thumbnail + .entry-content {
      padding: 40px 0 0 0; }


.entry-thumbnail a,
.popup-gallery-item,
.image-popup {
  float: left;
  position: relative;
  max-width: 100%;
  overflow: hidden; }
  .entry-thumbnail a img,
  .popup-gallery-item img,
  .image-popup img {
    display: block; }
  .entry-thumbnail a:before, .entry-thumbnail a:after,
  .popup-gallery-item:before,
  .popup-gallery-item:after,
  .image-popup:before,
  .image-popup:after {
    position: absolute;
    top: 30px;
    right: 30px;
    bottom: 30px;
    left: 30px;
    content: '';
    opacity: 0;
    -webkit-transition: opacity 350ms, -webkit-transform 350ms;
    transition: opacity 350ms, transform 350ms; }
    @media (max-width: 767px) {
      .entry-thumbnail a:before, .entry-thumbnail a:after,
      .popup-gallery-item:before,
      .popup-gallery-item:after,
      .image-popup:before,
      .image-popup:after {
        top: 15px;
        right: 15px;
        bottom: 15px;
        left: 15px; } }
  .entry-thumbnail a:before,
  .popup-gallery-item:before,
  .image-popup:before {
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: scale(0, 1);
    transform: scale(0, 1); }
  .entry-thumbnail a:after,
  .popup-gallery-item:after,
  .image-popup:after {
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-transform: scale(1, 0);
    transform: scale(1, 0); }
  .entry-thumbnail a .link-marker,
  .popup-gallery-item .link-marker,
  .image-popup .link-marker {
    background: #ff5400;
    width: 88px;
    height: 88px;
    line-height: 88px;
    text-align: center;
    border: 16px solid rgba(255, 255, 255, 0.7);
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -30px 0 0 -60px;
    border-radius: 60px;
    font-size: 50px;
    color: #fff;
    opacity: 0;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    -webkit-background-clip: content-box;
    -moz-background-clip: content-box;
    background-clip: content-box;
    -webkit-transition: all 350ms;
    transition: all 350ms; }
    @media (max-width: 767px) {
      .entry-thumbnail a .link-marker,
      .popup-gallery-item .link-marker,
      .image-popup .link-marker {
        width: 60px;
        height: 60px;
        line-height: 60px;
        border-width: 10px;
        margin: -20px 0 0 -40px;
        border-radius: 40px;
        font-size: 35px; } }
    .entry-thumbnail a .link-marker:before,
    .popup-gallery-item .link-marker:before,
    .image-popup .link-marker:before {
      content: "\f0c1";
      font-family: FontAwesome; }
    .entry-thumbnail a .link-marker.popup:before,
    .popup-gallery-item .link-marker.popup:before,
    .image-popup .link-marker.popup:before {
      content: "\f067"; }
  .entry-thumbnail a:hover:before, .entry-thumbnail a:hover:after,
  .popup-gallery-item:hover:before,
  .popup-gallery-item:hover:after,
  .image-popup:hover:before,
  .image-popup:hover:after {
    opacity: .8;
    -webkit-transform: scale(1);
    transform: scale(1); }
  .entry-thumbnail a:hover .link-marker,
  .popup-gallery-item:hover .link-marker,
  .image-popup:hover .link-marker {
    color: #fff;
    opacity: 1;
    margin-top: -60px; }
    @media (max-width: 767px) {
      .entry-thumbnail a:hover .link-marker,
      .popup-gallery-item:hover .link-marker,
      .image-popup:hover .link-marker {
        margin-top: -40px; } }


/* Sticky post */
.is-loop.sticky .entry-header {
  position: relative; }
  .is-loop.sticky .entry-header > * {
    position: relative;
    z-index: 2; }
  .is-loop.sticky .entry-header:after {
    position: absolute;
    width: auto;
    top: -30px;
    right: -30px;
    bottom: 0;
    left: -30px;
    border: 5px solid #ff5400;
    content: "";
    z-index: 1; }
  .is-loop.sticky .entry-header + .entry-content {
    padding: 20px 0 0 0; }


.left-sidebar {
  float: right !important; }


.entry-footer:after {
  clear: both;
  width: 100%;
  display: block;
  content: ""; }
.is-single .entry-footer {
  border-top: 1px solid #ff5400;
  padding: 20px 0 0 0;
  margin: 10px 0 0 0; }


.etry-more-btn {
  float: right;
  margin: 0 -30px 0 0; }


.entry-gallery {
  margin: 0 -30px;
  position: relative; }
  .entry-gallery + .entry-content {
    padding-top: 30px; }
  .entry-gallery-item {
    margin: 0;
    position: relative; }
    .entry-gallery-item img {
      display: block; }
    .entry-gallery-item.nth-child {
      display: none; }
      .entry-gallery-item.nth-child.slick-slide {
        display: block; }
  .entry-gallery-prev, .entry-gallery-next {
    position: absolute;
    width: 48px;
    height: 48px;
    line-height: 48px;
    top: 50%;
    margin: -24px 0 0 0;
    background: #2b5387;
    color: #fff;
    font-size: 30px;
    cursor: pointer;
    text-align: center;
    transition: all 200ms ease-in; }
    .entry-gallery-prev:before, .entry-gallery-next:before {
      font-family: FontAwesome; }
    .entry-gallery-prev:hover, .entry-gallery-next:hover {
      background: #ff5400; }
  .entry-gallery-prev {
    left: 30px; }
    .entry-gallery-prev:before {
      content: "\f104"; }
  .entry-gallery-next {
    right: 30px; }
    .entry-gallery-next:before {
      content: "\f105"; }
  .entry-gallery-caption {
    color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px;
    background: #0b1f39;
    background: rgba(11, 31, 57, 0.7); }


.entry-image {
  margin: 0 -30px; }
  .entry-image + .entry-content {
    padding-top: 30px; }
  .entry-image:after {
    clear: both;
    width: 100%;
    display: block;
    content: ""; }
  .entry-image-item {
    margin: 0; }
    .entry-image-item img {
      display: block; }


.entry-video {
  margin: 0 -30px;
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden; }
  .entry-video iframe,
  .entry-video object,
  .entry-video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
  .entry-video + .entry-content {
    padding-top: 30px; }


.error-404 {
  text-align: center; }
  .error-404 .page-content {
    background: none;
    padding: 0; }
  .error-404-num {
    padding: 40px 0;
    font-size: 140px;
    line-height: 140px;
    color: #ff5400;
    font-family: "Montserrat Alternates", sans-serif; }
  .error-404 .search-form {
    display: inline-block;
    padding: 30px 60px;
    margin: 0;
    background: #fff; }
    @media (max-width: 500px) {
      .error-404 .search-form {
        padding: 20px;
        overflow: hidden; }
        .error-404 .search-form > label {
          width: 65%;
          float: left; }
        .error-404 .search-form .search-submit {
          float: left;
          width: 35%; } }
    .error-404 .search-form input {
      vertical-align: top; }


/*--------------------------------------------------------------
## Asides
--------------------------------------------------------------*/
.blog .format-aside .entry-title,
.archive .format-aside .entry-title {
  display: none; }

Alles anzeigen

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Mayestic

Anschließend habe ich mir auch die woocommerce.php angeschaut und habe auch ein enige diese werte verändern, jedoch hat es absolut nichts gebracht.[CODE]/**

Code

* Add WC Image sizes to WP.
*
* @since 2.3
*/
private function add_image_sizes() {
$shop_thumbnail = wc_get_image_size( 'shop_thumbnail' );
$shop_catalog = wc_get_image_size( 'shop_catalog' );
$shop_single = wc_get_image_size( 'shop_single' );
add_image_size( 'shop_thumbnail', $shop_thumbnail['width'], $shop_thumbnail['height'], $shop_thumbnail['crop'] );
add_image_size( 'shop_catalog', $shop_catalog['width'], $shop_catalog['height'], $shop_catalog['crop'] );
add_image_size( 'shop_single', $shop_single['width'], $shop_single['height'], $shop_single['crop'] );
}

Alles anzeigen

Hmm mir ist bewusst das es wirklich besser ist und für die Lernkurve auch vorteilhafter wenn man diese dinge selber herausfindet, aber leider habe ich sehr viel versucht und komme wirklich nicht weiter. Falls der eine oder andere etwas zeit erübrigen kann und mich in die richtige Richtung schicken kann bzw. mir einen Lösungsweg zeigt, wäre ich sehr dankbar. In diesem sinne vielen dank im Voraus..

Mayestic

Ich habe es im custum css versucht, aber leider ohne glück...

Code

/*
 * Hook in on activation
 *
 */
add_action( 'init', 'yourtheme_woocommerce_image_dimensions', 1 );


/**
 * Define image sizes
 */
function yourtheme_woocommerce_image_dimensions() {
      $catalog = array(
        'width'     => '500',    // px
        'height'    => '500',    // px
        'crop'        => 1         // true
    );


    $single = array(
        'width'     => '600',    // px
        'height'    => '600',    // px
        'crop'        => 1         // true
    );


    $thumbnail = array(
        'width'     => '350',    // px
        'height'    => '350',    // px
        'crop'        => 0         // false
    );


    // Image sizes
    update_option( 'shop_catalog_image_size', $catalog );         // Product category thumbs
    update_option( 'shop_single_image_size', $single );         // Single product image
    update_option( 'shop_thumbnail_image_size', $thumbnail );     // Image gallery thumbs
}

Alles anzeigen

mensmaximus

Warum änderst Du die Bildgröße nicht in WooCommerce und generierst die Bilde dann neu?

Mayestic

Ich habe die Bilder unter Woocommerce---> Einstellungen---> Produkte--->Bilder eingestellt, danach Bilder regenerieren Plugin angewendet. Leider hilft das alles nicht, das war das erste was ich gemacht habe..

mensmaximus

Zitat von Mayestic

Ich möchte im Shop die Produkte thumbnail Bildergröße wie in der Teheme Demo vergrößern,

Zitat von Mayestic

Ich habe die Bilder unter Woocommerce---> Einstellungen---> Produkte--->Bilder eingestellt, danach Bilder regenerieren Plugin angewendet. Leider hilft das alles nicht, das war das erste was ich gemacht habe..

Hast Du denn schon mal beim Theme Hersteller nachgefragt? Wenn Du es wie in der Demo haben möchtest, hat der Entwickler ja bereits die Lösung.

Mayestic

Ja ich habe dem Theme Hersteller über die Homepage angeschrieben, über Facebook und habe zusätzlich ein thread unter support bereich für das Theme gemacht. Da schaint aber nicht viel aktivität zu sein ;)

mensmaximus

Zitat von Mayestic

Ja ich habe dem Theme Hersteller über die Homepage angeschrieben, über Facebook und habe zusätzlich ein thread unter support bereich für das Theme gemacht. Da schaint aber nicht viel aktivität zu sein ;)

Die letzte Antwort des Themeautors ist 9 Monate alt. Genauso alt ist die letzte Aktualisierung. Wenn sich der Entwickler nicht meldet würde ich über die weitere Verwendung des Themes ernsthaft nachdenken.

Mayestic

Da gebe ich dir vollkommen recht, ich verfolge noch ein zweites Projekt mit dem Premium Theme Kallyas, das ist wiederum so vollgepackt, das es einem am Anfang erschlägt. Aber mann arbeitet sich rein, so ist es immer ;) Was das Theme Azeria betrifft ist es sehr schade, da es meines Erachtens für Anfänger recht gut zu bearbeiten ist. Aber wenn der Support nicht antwortet bzw. es keine Aktualisierungen gibt, kann man nichts machen. Updates sind mir eigentlich gar nicht so wichtig, eher die null Kommunikation ist das störende...

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Woocommerce Produkt thumbnail bildergröße / schwierigkeiten beim vergrößern

Jetzt mitmachen!