Modificación de botón " añadir a carrito dentro de la imagen"

Buenos días hemos introducido este codigo php para colocar un boton de añadir a carito dentro de las imagenes donde se muestran los productos. ( add_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_add_to_cart', 20 );

Con esta configuracion css 

/* Posiciona el botón sobre la imagen */
.woocommerce ul.products li.product .button {
position: absolute;
top: 80%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: all 0.3s ease;
z-index: 10;
}

/* Muestra el botón al pasar el ratón (Hover) */
.woocommerce ul.products li.product:hover .button {
opacity: 1;
}

Hay posibilidad de que solo fuera un simbolo "+" dentro de un circulo y posicionarlo siempre en la esquina derecha abajo, ahora mis mismo la posición en formato escritorio es correcta pero en formato movil no se adapta al tamaño. Podrían ayudarme a configurar la css de ese boton?

Contenido solo visible a usuarios registrados